如何使用 NextJS 和 next-i18next 翻译路线？

Posted 2023-02-22

【中文标题】如何使用 NextJS 和 next-i18next 翻译路线？

【英文标题】：How to translate routes with NextJS and next-i18next?

【发布时间】：2020-06-07 01:48:53

【问题描述】：

我正在使用 next.JS 和包 next-i18next 构建一个多语言网站。进展顺利，除了一件事我不确定什么是最好的方法。我希望我的静态路由也能被翻译（不仅仅是页面内容），例如：

example.com/en/home -> example.com/pt-br/inicio

example.com/en/contact -> example.com/pt-br/contato

我知道我可以创建目录 (en/pt-br) 并在其中插入页面（例如：home.js、contact.js 等在“/en/”和 inicio.js、contato.js 等在“/pt-br/”内），当用户访问这些页面中的任何一个时，这样定义语言很容易，但我需要创建两个内容几乎相同的文件（例如：“/en/家”和“/pt-br/inicio”）。所以我想知道是否有更好的解决方案？

谢谢！

【问题讨论】：

您找到解决方案了吗？ @Alexandre Paiva？

我能想到的唯一可能的方法是使用 next-routes 和 next-i18next。

我也面临同样的问题。你找到解决办法了吗？

【参考方案1】：

对于解决方法，

我将组件页面创建为单独的模块，然后将其导入并导出回语言环境页面文件夹。所以我可以为多种语言重用 1 个组件。

【参考方案2】：

您可以使用Next.js rewrites，而不是为多种语言复制同一个页面，这会损害构建性能并且无法扩展，您可以使用Next.js rewrites。

它是在v9.5 中引入的，允许您重写特定页面的路径，在您的示例中，您可以为主要语言创建页面，并且您可以通过重写添加支持的所有辅助语言。 结合i18n subpaths（在v10 中引入）接下来将处理语言环境部分（/en/ / /pt-br/）。

例如：您的 pages 文件夹将包含 2 个页面，home 和 contact。

// next.config.js

module.exports = 
  i18n: 
    locales: ['en', 'pt-br'],
    defaultLocale: 'en',
  ,

  async rewrites() 
    return [
      
        source: '/inicio', // automatically handles all locales
        destination: '/home', // automatically passes the locale on
      ,
      
        source: '/contato', 
        destination: '/contact', 
      
    ]
  ,

更多信息请查看Rewrites with i18n support 文章。

【讨论】：

感谢您的回答。至于上面的答案，我不会翻译 URL。我不想为翻译创建子域。我正在寻找可以翻译帖子的 slug 并呈现翻译内容的东西:)

处理语言环境子路径有 2 个选项，子路径/子域...阅读我添加的文档

我想我明白了。那么我需要在page文件夹中创建两个文件吗？ /about 和 /uber-uns

不，这就是rewrites的全部想法，你将一个url（source字段）重写为一个页面（destination字段）......

它有效，我有两个问题。每次我更改 next.config.js。我必须手动终止服务器并重新运行它。另外，我的语言环境是错误的 :) 谢谢你的帮助。