NextJS 国际化路由（本地化 slugs）

Question

我有一个使用 i18n 进行国际化路由的网站，它工作正常，但现在我们想翻译、本地化 slugs。

例如，我们有这条路线/integrations-and-plugins 例如：3 个区域设置，en de 和 hu 我们想要的是：

• /en/集成和插件/
• /de/集成和插件/
• /hu/integraciok-es-pluginok/

（+此外它还有一个集成和插件/*id，但并不重要）

这是我的下一个配置相关部分：

const bundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: !!process.env.BUNDLE_ANALYZE,
})

module.exports = bundleAnalyzer({
  images: {
    domains: ['cdn.builder.io'],
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          // this will allow site to be framed under builder.io for wysiwyg editing
          {
            key: 'Content-Security-Policy',
            value: 'frame-ancestors https://*.builder.io https://builder.io',
          },
        ],
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/hu/integracios-es-ellenorzesi/',
        destination: '/hu/integrations-and-plugins/',
        locale: false,
      },
      {
        source: '/de/integracios-es-ellenorzesi/',
        destination: '/de/integrationen-und-plugins/',
        locale: false,
      },
     
    ]
  },
  // async redirects() { //WE DON'T WANT TO USE REDIRECTS BECAUSE OF SEO PURPOSES
  //   return [
  //     {
  //       source: '/hu/integracios-es-ellenorzesi/',
           destination: '/hu/integrations-and-plugins/',
  //       permanent: true,
  //       locale: false,
  //     },
  //     {
  //       source: '/de/integracios-es-ellenorzesi/',
           destination: '/de/integrationen-und-plugins/',
  //       permanent: true,
  //       locale: false,
  //     },
  //   ]
  // },
  i18n: {
    locales: ['default', 'en', 'hu', 'de', 'cz', 'eu', 'sl'],
    defaultLocale: 'default',
    localeDetection: true,
  },
  trailingSlash: true,
})

据我所知，Next.js 目前不支持此功能（https://github.com/vercel/next.js/discussions/18485）

通过重写，我只能实现内容是正确的，但 url 将保持不变，虽然重定向可以用于更改 url，但我们不想重定向，因为 SEO，而且它根本不是最好的选择。

希望有人遇到同样的问题，并且可以帮助我找出翻译 url slugs 的最佳方法：

Answer 1

我认为 Next.js APP 文件夹中的翻译 slugs 没有得到解决。

官方建议是使用

[lang]

根段和一堆重写/中间件，这是IMO开销，并且不利于基于静态文件的路由的好处。

我建议使用静态路由 = 提前生成所有翻译的 slugs。

我为此创建了一个小库。请随意检查它可能会有所帮助。

https://github.com/svobik7/next-roots

Answer 2

NextJS 存储库上有一个与您的问题相关的问题主题，可能会帮助您遵循社区方法：https://github.com/vercel/next.js/discussions/18485