使用客户端路由构建Next.js多语言应用程序

Question

我目前正在使用Next.js在多语言应用程序中工作，我打算将其托管在S3存储桶中。在此站点中，我需要通过从一条路由到另一条路由的客户端路由来维护跨路由的应用程序状态。

由于我需要支持40多种语言和国际化，因此，这样做的过程如下：

• 在next.config.js中，使用exportPathMap生成/ [language]路由，并在“ query”中包含一个包含该语言特定语言环境的变量。]​​>

• 将此语言环境加载到_app的getInitialProps中，并将其传递给提供程序，以使用上下文API在应用程序的任何部分中使用。

• 为了支持客户端路由，我将next / link组件包装在一个自定义Link中，该链接传递了所有prop，并将“ as” prop设置为“ / [language] / [route]”。

此解决方案目前有效，但理想情况下，我不需要使用“ as”道具“模拟”路由。我发现接下来的动态路由不允许以客户端路由的方式来避免将页面刷新为与动态路径匹配的新.html文件。例如：使用以下目录结构：

/pages
   index.tsx
   /[lang]/
       home.tsx
       dashboard.tsx
从index.tsx，单击下一个/重定向到/en/dashboard的链接的链接将触发对服务器的请求并完全刷新页面。因此，丢失了客户端状态。

是否有更好的解决方案？这似乎是一个非常普遍的问题，但我无法使用Next.js找到一个优雅的解决方案。

我目前正在使用Next.js在多语言应用程序中工作，我打算将其托管在S3存储桶中。在此站点中，我需要通过执行客户端...

Answer 1

如果要使用客户端路由构建Next.js多语言应用程序，请参见示例https://github.com/jarukus/simple-i18n-example