Force a Default Locale Sub-Folder with Next.js

Next.js provides built-in internationalization support, enabling websites to serve content based on user locale preferences. However, the framework’s default behavior creates an accessibility issue: if en-GB is designated as the default locale, it becomes available at both yourwebsite.com and yourwebsite.com/en-GB.

The Challenge

While canonical meta tags mitigate SEO concerns, some site operators prefer enforcing a consistent URL structure where the default locale always includes an explicit path segment.

The Solution: The Catch-All Redirect Method

Create a pseudo-locale called catchAll and set it as the default. Configure redirects to automatically route all catchAll traffic to your preferred locale:

// 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 workaround ensures visitors consistently access the site through yourwebsite.com/en-GB rather than the root domain.