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

【问题标题】：How do I localize routes with next.js and next-i18next?如何使用 next.js 和 next-i18next 本地化路由？
【发布时间】：2019-10-18 22:27:30
【问题描述】：

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

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

【问题讨论】：

我认为这在很大程度上取决于您如何定义和管理您的路线。例如。它们是动态的，它们是否在 CMS 中定义，是否硬编码等。最终，如果您想要一个指向当前页面的替代语言版本的链接，您需要将所有路径名称变体传递到每个页面。跨度>

标签： next.js i18next

【解决方案1】：

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

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')

而且我还必须基于next/link 创建一个自定义Link 组件，并在其中手动将语言添加到URL。

【讨论】：

这是一个很好的解决方案，您可以将 i18next Link 与 next-routes 结合起来，将第一个链接作为参数传递给构造函数github.com/fridays/next-routes/blob/master/src/index.js#L11-L12
你能分享你的解决方案吗？谢谢
我的要求是一样的，你能分享你的完整解决方案吗？提前致谢。
@SalmanLone 你到底错过了什么？这是完整的解决方案。除了描述之外，真的没有别的了。
感谢您的建议。但是，我想问一下，您使用的是哪个翻译包？我尝试使用带有子路径的 next-i18n 作为语言指示器。但是我无法获得 URL 与您通过下一个 i18n 子路径传递的语言之间的连接点？您是否使用子路径或查询语言？您能否提供一个示例，说明您是如何从服务器端和客户端调用路由的。

【解决方案2】：

next-i18next 支持这个functionality，它称为语言环境子路径。

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

【讨论】：

很抱歉，但这不是我需要的。我使用了 localeSubpaths 选项，但它完全符合我想要避免的以及我在问题中描述的内容 - 例如，如果我在 /en/career 并且我切换到 cs，我会得到 /cs/career。但我需要 /cs/kariera - 来更改 URL 的其余部分。
localeSubpaths: 'foreign' 现已弃用。