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
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
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.
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
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.
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.