NextJS URL rewrite creates duplicate pages?

Question

I just setup URL rewrites in NextJS to translate my URLs for my multilingual website.

This is how my next.config.js file looks:

module.exports = {
  i18n: {
    locales: ["da", "de"],
    defaultLocale: "da",
  },
  async rewrites() {
    return [
      {
        source: "/de/ueber-uns",
        destination: "/de/om",
        locale: false,
      },
    ];
  }
}

So if you try to access domain.com/de/ueber-uns (which is a page that doesn't exist), the URL will show the content from the /de/om page.

The problem is, that if you try to access /de/om, that URL will not redirect to /de/ueber-uns.

So I suspect that it will look like duplicate pages to Google/SEO and cause problems.

How can I avoid that (if possible)? Setting a redirect in next.config.js doesn't help.

Answer 1

I faced the same problem, and it seems like this is default behaviour since pages in /pages/some/path always produce valid routes. What I did was to also add redirects that go in the opposite direction, so in your case:

  async redirects() {
    return [
      {
        source: "/de/om",
        destination: "/de/ueber-uns",
        permanent: true,
      },
    ];
  }

This way the new URL still works, but the old one redirects to the new one. And by using the permanent: true it is my understanding that it won't impact SEO, since the NextJS documentation states:

permanent: true will use the 308 status code which instructs clients/search engines to cache the redirect forever

https://nextjs.org/docs/api-reference/next.config.js/redirects

This worked for me, so if you are having issues maybe double check your config.