Domain routing for locales in NextJS - Step-by-Step Execution

Concept Flow - Domain routing for locales

User enters URL

↓

Next.js checks domain

↓

Match domain to locale config?

No→Use default locale

Yes↓

Set locale based on domain

↓

Render page with locale

↓

User sees localized content

Next.js checks the domain the user visits, matches it to a locale, then renders the page in that locale.

Execution Sample

NextJS

export const nextConfig = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    domains: [
      { domain: 'example.com', defaultLocale: 'en' },
      { domain: 'exemple.fr', defaultLocale: 'fr' }
    ]
  }
}

This config sets English for example.com and French for exemple.fr domains.

Execution Table

Step	User URL	Domain Matched	Locale Set	Page Rendered
1	https://example.com/home	example.com	en	Home page in English
2	https://exemple.fr/home	exemple.fr	fr	Home page in French
3	https://unknown.com/home	No match	en (default)	Home page in English
4	https://example.com/about	example.com	en	About page in English
5	https://exemple.fr/about	exemple.fr	fr	About page in French

💡 Execution stops after rendering the localized page based on domain or default locale.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5
userURL	N/A	https://example.com/home	https://exemple.fr/home	https://unknown.com/home	https://example.com/about	https://exemple.fr/about
matchedDomain	N/A	example.com	exemple.fr	No match	example.com	exemple.fr
locale	en (default)	en	fr	en (default)	en	fr
pageRendered	N/A	Home page in English	Home page in French	Home page in English	About page in English	About page in French

Key Moments - 2 Insights

Why does the locale default to 'en' when the domain is unknown?

Because the execution_table row 3 shows 'No match' for domain, so Next.js uses the defaultLocale 'en' as configured.

How does Next.js know which locale to use for a domain?

Next.js matches the domain from the user URL to the domains array in the config, as shown in execution_table rows 1 and 2.

Visual Quiz - 3 Questions

Look at the execution_table, what locale is set when the user visits 'https://exemple.fr/home'?

A en

B defaultLocale

C fr

D No locale

💡 Hint

Check row 2 under 'Locale Set' in the execution_table.

At which step does the domain not match any configured domain?

A Step 1

B Step 3

C Step 5

D Step 2

💡 Hint

Look for 'No match' in the 'Domain Matched' column in execution_table.

If we add a new domain 'example.de' with defaultLocale 'de', what would happen when visiting 'https://example.de/home'?

A Locale would be 'de' and page rendered in German

B Locale would be 'en' as default

C No locale set, error occurs

D Locale would be 'fr'

💡 Hint

Refer to how domains map to locales in the execution_table and variable_tracker.

Concept Snapshot

Next.js domain routing for locales:
- Configure i18n.domains with domain and defaultLocale
- User visits URL
- Next.js matches domain to locale
- If no match, uses defaultLocale
- Page renders in matched locale
- Enables localized content by domain

Full Transcript

Domain routing for locales in Next.js means the app looks at the domain name the user visits. It checks if the domain matches any configured domain in the i18n.domains array. If it matches, Next.js sets the locale to the domain's defaultLocale. If no domain matches, it uses the defaultLocale set globally. Then the page renders with content in that locale. For example, example.com shows English content, while exemple.fr shows French. This lets websites serve different languages on different domains automatically.