next.js - NextJS i18next Nextjs 本地化路由

Question

我已经为我的 NextJS 网站完全实现了 next-i18next。一切正常:

• 使用 i18next 中间件自动检测语言
• 使用语言选择按钮更改语言
• 仅在相关命名空间等中加载的翻译

但是，我想本地化路由名称，以便它们反射(reflect)设置的语言。

我了解如何使用 next-routes 完成此操作，并且这种交流特别有用:

How do I localize routes with next.js and next-i18next?

在那个例子中，路由设置如下:

routes.add('en-home', '/', 'index')
routes.add('de-home', '/de', 'index')
routes.add('en-test', '/test', 'test')
routes.add('de-test', '/de/prufung', 'test')

我尝试使用以下模式作为示例从下一个路由实现路由和链接:

1. 从i18n.language获取当前语言
2. 根据语言设置链接url

<Link route={`${lang}-home`}></Link>

同样，对下一个路由路由器使用类似的模式，例如:

Router.pushRoute(`${lang}-home`)

但是，这不起作用。

我注意到在引用的线程中，@samuelg0rd0n 评论说他创建了一个自定义链接组件。

谁能指导我如何根据网站设置的语言更改所有路由？

谢谢!

Answer 1

我强烈建议您尝试官方的 Next.js 示例:

Next.js -- 命名路由示例 (next-routes)

https://github.com/zeit/next.js/tree/canary/examples/with-next-routes

但我看到它需要一个额外的服务器，如果我们将我们的应用程序结构自定义为我自己的项目示例，它也会失败:

| src/app
   | -- pages
       | -- post.js
       | -- category.js
   | -- server.js (for routes)

| src/functions
   | -- index.js (lambda function for server-side)

如果我运行 next src/app 它将失败并出现以下错误:

Error: > Couldn't find a `pages` directory. Please create one under the project root
    at findPagesDir (/home/paneladm/projects/paneladm-dev/travel-website/node_modules/next/dist/lib/find-pages-dir.js:3:170)
    at new DevServer (/home/paneladm/projects/paneladm-dev/travel-website/node_modules/next/dist/server/next-dev-server.js:1:3491)
    at createServer (/home/paneladm/projects/paneladm-dev/travel-website/node_modules/next/dist/server/next.js:2:105)
    at Object.<anonymous> (/home/paneladm/projects/paneladm-dev/travel-website/src/app/server.js:14:13)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)

Next.js 团队现在正在研究一个简单的解决方案

This adds an example showing how to remove the need for a custom server for an existing application using next-routes by leveraging the new custom routes support built-in to Next.js

您应该将 next 更新为 9.1.+ 并实现您自己的路由，如下所示:

const nextRoutes = require('next-routes');
const routes = (module.exports = nextRoutes());

routes.add('category', '/category/:slug');
routes.add('post', '/post/:lang/:slug');

在您的 next.config.js 文件中，启用 experimental 属性并实现 rewrites 方法，如下所示:

const { routes } = require('./routes');

...

experimental: {
    rewrites() {
      const rewrites = [];

      for (const route of routes) {
        if (route.pattern !== route.page) {
          rewrites.push({
            source: route.pattern,
            destination: route.page,
          });
        }
      }

      return rewrites;
    }
  },

现在你的结构应该是:

| src/app
   | -- pages
       | -- post.js
       | -- category.js

但是如果你想自定义你的页面，尝试像这样改变路由:

...

routes.add('category/[slug]', '/category/:slug');
routes.add('post/[slug]', '/post/:lang/:slug');

它将指向 pages --> category --> [slug].js 文件。

在新 PR implementation 中查看更多详细信息文件。

引用

• Next.js PR 9519 - Add next-routes/custom-routes example