Force a Default Locale Sub-Folder with Next.js

Next.js has built-in i18n routing, but the default locale ends up served from two URLs. If en-GB is the default, the same page is live at both yourwebsite.com and yourwebsite.com/en-GB.

The problem

Canonical tags cover the SEO angle, but sometimes you want a single, consistent URL structure where every locale — including the default — has its own path segment.

A catch-all redirect

Define a pseudo-locale called catchAll, set it as the default, then redirect everything hitting it to the locale you actually want:

// 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,
      },
    ]
  },
}

Every visitor ends up on yourwebsite.com/en-GB, not the root. Not pretty internally, but the URLs are consistent.