Why Domain routing for locales in NextJS? - Purpose & Use Cases

The Big Idea

What if your website could magically show the right language just by the domain users visit?

The Scenario

Imagine you have a website that serves users in different countries, each with its own language and domain like example.com for English and example.fr for French.

You try to manually redirect users based on their language preference by checking the URL and rewriting links everywhere.

The Problem

Manually managing redirects and links for each locale is confusing and error-prone.

You might forget to update some links or mix languages, causing a bad user experience.

It also makes your code messy and hard to maintain as your site grows.

The Solution

Domain routing for locales lets Next.js automatically serve the right language version based on the domain.

This means you configure your domains once, and Next.js handles routing users to the correct locale seamlessly.

Before vs After

✗ Before

if (url.includes('/fr')) { redirectTo('example.fr'); } else { redirectTo('example.com'); }

✓ After

module.exports = { i18n: { locales: ['en', 'fr'], defaultLocale: 'en', domains: [{ domain: 'example.com', defaultLocale: 'en' }, { domain: 'example.fr', defaultLocale: 'fr' }] } }

What It Enables

You can easily support multiple languages with their own domains, giving users a smooth, localized experience without extra code.

Real Life Example

A global e-commerce site uses domain routing to show prices and content in the local language and currency automatically when users visit their country-specific domain.

Key Takeaways

Manual locale redirects are hard to manage and error-prone.

Domain routing automates locale detection based on domain names.

This leads to cleaner code and better user experience across languages.