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

Question

我正在使用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）并将页面插入其中（例如：在"/en/"内放置home.js、contact.js等，在"/pt-br/"内放置inicio.js、contato.js等）。这样很容易定义用户访问这些页面时选择的语言，但我需要创建两个几乎完全相同的文件（例如："/en/home"和"/pt-br/inicio"）。所以我想知道是否有更好的解决方案呢？

谢谢！

- Alexandre Paiva

---

你找到解决方案了吗？@Alexandre Paiva？ - user1228739

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

我遇到了相同的问题。你找到解决方法了吗？ - Prince Sodhi

相关：如何在Next.js中设置i18n翻译的URL路由？。 - juliomalves

适用于应用程序路由器和Next.js 13+：https://dev59.com/-VWgsogBPY-HTNNj1UWn#76874385 - Branislav

Answer 1

为了避免在多语言页面中复制相同的页面，这会影响构建性能，而且如果需要支持超过5种语言，则不会扩展，你可以使用Next.js重写。

它是在v9.5中引入的，并允许您将路径重写到特定页面，在您的示例中，您可以为主要语言和所有辅助语言创建页面，并通过重写添加支持。 结合使用i18n子路径(在v10中引入)，next将处理位置部分(/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', 
      }
    ]
  },
}

了解更多信息，请查看支持国际化的重写文章。

- felixmosh

---

谢谢你的回答。关于上面的答案，我不会翻译URL。我不想为翻译创建子域。我正在寻找一种可以翻译文章slug并呈现翻译内容的方法 :) - Prince Sodhi

不，这就是重写的全部思想，您可以将一个URL（“源”字段）重写为另一页（“目标”字段）... - felixmosh

请确认您正在使用 Next.js v9.4 及以上版本。 - felixmosh

它可以工作，但我有两个问题。每次我更改next.config.js时，都必须手动关闭服务器并重新运行它。此外，我的本地化设置不正确 :) 谢谢你的帮助。 - Prince Sodhi

只需进行递增，使用通配符：{ source: '/cidades/:path*', destination: '/cities/:path*', }, - mariomol

Answer 2

针对最新的NextJS版本（目前为12.1.6），您可以使用以下软件包https://www.npmjs.com/package/next-translate-routes。

若要构建完全本地化的网站，必须翻译URL片段：这对用户体验和SEO非常重要。目前，Next只提供区域设置前缀（请参见Next.js国际化路由文档）。 next-routes软件包允许完全本地化路由，但它已不再维护，并且设计时没有采用最新的Next API，例如国际化路由、新的数据获取方法和自动静态优化。

- Daher

Answer 3

针对此问题的解决方法是，

我将组件页面创建为一个独立的模块，然后在本地化页面文件夹中导入和导出它。这样我就可以在多种语言中重复使用同一个组件。

- Phat Tran