NextJS internationalized routing (localized slugs)

Question

I have a website using i18n for internationalize routing, which works properly, but now we would like to translate, localize the slugs as well.

So for example, we have this route /integrations-and-plugins Eg: 3 locales, en de and hu We want that:

/en/integrations-and-plugins/
/de/integrationen-und-plugins/
/hu/integraciok-es-pluginok/

(+additionally it has a integrations-and-plugins/*id, but does not really matter)

Here is my next config relating part:

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,
})

As far as I know, this feature is currently not supported by Next.js (https://github.com/vercel/next.js/discussions/18485)

And with rewrites I can only achieve that the content will be the correct one, but the url will stay the same, and although redirects would work for changing the url, but we don't want to redirects, because of SEO, and it is simply not the best option for this.

Hope someone had the same issue, and can help me to figure out the best way to translate the url slugs:

NextJS internationalized routing (localized slugs)

0 Answers