Sub-path routing for locales in NextJS - Step-by-Step Execution

Concept Flow - Sub-path routing for locales

User visits URL

↓

Check URL path prefix

↓

Match locale sub-path?

↓

Load locale-specific content

↓

Render page with locale

↓

User sees page in chosen language

The app checks the URL prefix to detect the locale, loads content for that locale, and renders the page accordingly.

Execution Sample

NextJS

export const i18n = {
  locales: ['en', 'fr', 'es'],
  defaultLocale: 'en',
  localeDetection: false
};

// Example URL: /fr/about loads French content

This config sets up sub-path routing for English, French, and Spanish locales.

Execution Table

Step	URL Visited	Locale Detected	Action	Page Rendered
1	/en/home	en	Load English content	Home page in English
2	/fr/about	fr	Load French content	About page in French
3	/es/contact	es	Load Spanish content	Contact page in Spanish
4	/home	en (default)	Load default English content	Home page in English
5	/de/home	none	Fallback to default locale	Home page in English

💡 Routing stops after locale detection and page render for each URL.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
locale	undefined	en	fr	es	en	en
pageContent	undefined	English content	French content	Spanish content	English content	English content

Key Moments - 2 Insights

How does the app know which language to show when the URL has no locale prefix?

The app uses the defaultLocale ('en') when no locale prefix is found, as shown in step 4 of the execution_table.

What happens if the URL has a locale prefix not in the locales list?

The app falls back to the defaultLocale, as in step 5 where '/de/home' is not recognized and English content is loaded.

Visual Quiz - 3 Questions

Look at the execution_table, what locale is detected when visiting '/fr/about'?

A en

B fr

C es

D defaultLocale

💡 Hint

Check Step 2 in the execution_table under 'Locale Detected'.

At which step does the app use the default locale because no prefix is present?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step where URL has no locale prefix and defaultLocale is used.

If we add 'de' to the locales array, how would step 5 change?

A Locale detected would be 'de' and German content loads

B Locale detected remains 'en' and English content loads

C Locale detected is undefined and fallback triggers

D Page would not render

💡 Hint

Refer to variable_tracker and execution_table step 5 about locale detection and fallback.

Concept Snapshot

Sub-path routing uses URL prefixes like /en, /fr to detect locale.
Next.js loads content based on this prefix.
If no prefix, defaultLocale is used.
Unknown prefixes fallback to defaultLocale.
This enables multi-language sites with clear URLs.

Full Transcript

Sub-path routing for locales in Next.js means the app looks at the start of the URL path to find a language code like 'en' or 'fr'. If it finds one, it loads the content for that language. If not, it uses the default language, usually English. If the URL has a language code not supported, it falls back to the default. This way, users see the page in their language based on the URL they visit.