CODEWITHSUNDEEP
next.js
niels van hoof
niels van hoof

Reputation: 489

Next js rewrites not working for i18n routes

I'm having some issues with i18n rewrites in next js.

Inside of my next.config.js I have the following

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  i18n: {
    locales: ["en", "nl"],
    defaultLocale: "en",
  },

  async rewrites() {
    return [
      {
        source: "/nl/about",
        destination: "/nl/over-ons",
        locale: false,
      },
    ];
  },
};

Now I have the following two pages

about.tsx

index.tsx

Inside of my index.tsx file I have a single <Link> tag :

<Link href="/about">About us</Link>

Now when I change my browser language from EN to NL my route is prefixed with nl so that works fine, the problem is that the about page in nl never changes it's url to over-ons it always remains about.

Not sure what's going wrong in such a simple example?

Upvotes: 2

Views: 2858

Answers (1)

Michael Harley
Michael Harley

Reputation: 1048

maybe this is already late for you, but this might still help others.

What you want to achieve is maybe redirect, not rewrite. Learn more about rewrite and redirect.

Simply change your rewrites to redirect like the example below should fix your issue:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  i18n: {
    locales: ["en", "nl"],
    defaultLocale: "en",
  },

  async redirects() {
    return [
      {
        source: "/nl/about",
        destination: "/nl/over-ons",
        locale: false,
      },
    ];
  },
};

Upvotes: 0

Related Questions