Question 22471 in SEO Question posted in
Some basic information to get you started with this can be found here.

NextJS internationalized routing (localized slugs) – SEO

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

page structure

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:

Tags:

2

Answers


  1. 0

    This issue has been solved in the latest version of NextJS by implementing app directory, you can take a look at the documentation right here

    also, there’s an issue topic related to your question on the NextJS repository that might help you to follow the community approaches: https://github.com/vercel/next.js/discussions/18485

    Login or Signup to reply.
  2. 0

    I don’t think that translated slugs were solved in Next.js APP folder.

    The official recommendation is to use [lang] root segment and bunch of rewrites/middleware which is IMO overhead and comes against the benefits of static file-based routing.

    I would recommend to utilize static routes = generate all your translated slugs in advance.

    I have created a tiny lib for that. Feel free to check it it might help.

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search