2

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

由于我需要支持 40 多种语言和国际化，因此执行此操作的过程如下：

  • 在 next.config.js 中，使用 exportPathMap 生成 /[language] 路由，其中​​包含“查询”内的变量，该变量包含该语言的特定语言环境。

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

  • 为了支持客户端路由，我将下一个/链接组件包装在一个自定义链接中，该链接传递所有道具并将“as”道具设置为“/[语言]/[路由]”。

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

/pages
   index.tsx
   /[lang]/
       home.tsx
       dashboard.tsx

在 index.tsx 中，单击从 next/link 重定向到的链接/en/dashboard将触发对服务器的请求并完全刷新页面。因此，失去了客户端状态。

有没有更好的解决方案？这似乎是一个很常见的问题，但我找不到使用 Next.js 的优雅解决方案。

4

0 回答 0