如何使用 next.js 和 next-i18next 本地化路由？

Question

更改语言时需要更改路线名称。例如，我有一条路线，/en/career但是当我更改为捷克语时，我需要一条路线/cs/kariera。基本上我需要本地化 URL。现在，当我打开/en/career并将语言更改为 cs 时，我得到/cs/career. 这个页面根本不应该存在，当我在服务器上呈现页面时，我正确地得到了 404。我可以用 next-i18next 包做这样的事情吗？如果是这样，如何？

我发现这个包https://github.com/vonschau/next-routes-with-locale可能正是我需要的，但它显然不再维护并且不能在 next.js 8 下工作。

Answer 1

我最终做的是使用next-routespackage 并为每个页面定义特定的路由，例如：

module.exports = routes()
    .add('en-career-listing', '/en/career/:listing', 'career/listing')
    .add('cs-career-listing', '/cs/kariera/:listing', 'career/listing')
    .add('en-career', '/en/career', 'career')
    .add('cs-career', '/cs/kariera', 'career')
    .add('en-our-story', '/en/our-story', 'our-story')
    .add('cs-our-story', '/cs/nas-pribeh', 'our-story')

而且我还必须Link根据next/link我手动将语言添加到 URL 的位置创建自定义组件。

Answer 2

next-i18next 支持此功能，它称为区域设置子路径。

您需要配置：new NextI18Next({ localeSubpaths: 'foreign' })，然后使用NextI18Next实例上的 Link & Router ，而不是next/router。