Skip to content
Menu

Force a default locale sub-folder with Next.js

Next.js has built-in internationalisation (i18n) support, otherwise known as multi-lingual. This user allows your site to be locale-aware, and serve different content depending on what locale they have chosen.

When you are setting up locales on Next.js, you choose which of the locales should be the default. This is the one visitors would see if their browser's language setting doesn't match another locale.

One problem with this approach is that, if your default locale was en-GB, your default locale will be available at both yourwebsite.com and yourwebsite.com/en-GB.

With canonical meta tags, this is unlikely to cause real-world issues, but some site owners might prefer to force it so it's always yourwebsite.com/en-GB.

This isn't possible out-of-the-box in Next.js, but by using a few built-in features you can work around it with ease.

The trick...

First set up your locales, but add a final option called something like catchAll. This isn't a real locale, but you will see that we're setting it as our default locale.

Then, configure your redirects to redirect anything from /catchAll to /en-GB.

In summary: this trick makes users go to catchAll by default, but catchAll itself redirects to en-GB - thus forcing users to go to yourwebsite.com/en-GB as a default.

// next.config.js
module.exports = {
  i18n: {
    locales: ['en-GB', 'fr', 'catchAll'],
    defaultLocale: 'catchAll',
  },
  async redirects() {
    return [
      {
        source: '/catchAll',
        destination: '/en-GB',
        locale: false,
        permanent: false,
      },
      {
        source: '/catchAll/:slug*',
        destination: '/en-GB/:slug*',
        locale: false,
        permanent: false,
      },
    ]
  },
}

This feels like a bit of a hacky workaround, but at the time of writing - in April 2021 - it feels like the best solution to solve this problem out-of-the-box.