NextJS国际化路由(本地化slugs)

4zcjmb1e  于 2023-04-05  发布在  其他
关注(0)|答案(2)|浏览(203)

我有一个网站使用i18 n的国际化路由,它工作正常,但现在我们想翻译,本地化的蛞蝓以及。

例如,我们有这个路由 /integrations-and-plugins Eg:3区域设置,en de and hu我们想要:

  • /zh/integrations-and-plugins/
  • /de/integrationen-und-plugins/
  • /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)目前不支持此功能。
和重写我只能实现的内容将是正确的,但网址将保持不变,虽然重定向将工作改变网址,但我们不想重定向,因为搜索引擎优化,它根本不是最好的选择。
希望有人有同样的问题,并能帮助我找出最好的方法来翻译网址蛞蝓:

tnkciper

tnkciper1#

这个问题已经在最新版本的NextJS中解决,实现了app目录,大家可以看看right here文档
此外,还有一个与您关于NextJS存储库的问题相关的问题主题,它可能会帮助您遵循社区方法:https://github.com/vercel/next.js/discussions/18485

xmq68pz9

xmq68pz92#

我不认为翻译的slugs在Next.js APP文件夹中得到了解决。
官方建议使用[lang]根段和一堆重写/中间件,这是IMO开销,并且与基于静态文件的路由的好处相反。
我建议使用静态路由=提前生成所有翻译的slug。
我已经为此创建了一个小库。请随意检查它,它可能会有所帮助。
https://github.com/svobik7/next-roots

相关问题