'Next.js route rewrites not working as expected

I have two locales for my web app built with Next.js. Each time, a user switches between the two languages, I want my routes to be updated accordingly.

My next.config.js file looks like this:

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en'
  },
  async rewrites() {
    return [
      {
        source: '/de/contact',
        destination: '/ueber-uns',
        locale: false,
      },
      {
        source: '/de/about-us',
        destination: '/kontakt',
        locale: false,
      }
    ]
  }
}

Each time I use the navigation, the url rewrite doesn't happen, and the result is still the english route:

/de/contact or /de/about-us

How can I make the rewrites work, so instead of the above it shows the following:

/de/kontakt or /de/ueber-uns

My navigation file contains the links, like this:

<li className="navbar__item active">
    <Link href={'/about-us'}><a>{translation.about}</a></Link>
</li>
<li className="navbar__item active">
    <Link href={'/contact'}><a>{translation.about}</a></Link>
</li>

I would have expected that once the user clicks one of the links, the route is rewritten based on the rules in the next.config.js file and the german version is shown. Any ideas how to fix this?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Next.js route rewrites not working as expected

Sources

Related Questions