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.

Practice

1. What is the main purpose of sub-path routing for locales in Next.js?

easy

A. To create separate apps for each language without sharing code.

B. To serve different language versions of the site using URL prefixes like /en or /fr.

C. To load all languages at once on the homepage.

D. To disable internationalization features in Next.js.

Solution

1. Step 1: Understand sub-path routing concept

   Sub-path routing uses URL parts like /en or /fr to show different language versions of the same site.

2. Step 2: Compare options

   Only To serve different language versions of the site using URL prefixes like /en or /fr. correctly describes this purpose. Other options describe unrelated or incorrect behaviors.

3. Final Answer:

   To serve different language versions of the site using URL prefixes like /en or /fr. -> Option B

4. Quick Check:

   Sub-path routing = URL prefixes for languages [OK]

Hint: Remember: sub-path routing adds language code in URL path [OK]

Common Mistakes:

• Thinking sub-path routing loads all languages at once
• Confusing sub-path routing with separate apps per language
• Believing it disables i18n features

2. Which is the correct way to configure supported locales in next.config.js for sub-path routing?

easy

A. "i18n: ['en', 'fr'], defaultLocale: 'en'"

B. "locales: ['en', 'fr'], default: 'en'"

C. "i18n: { languages: ['en', 'fr'], defaultLang: 'en' }"

D. "i18n: { locales: ['en', 'fr'], defaultLocale: 'en' }"

Solution

1. Step 1: Recall Next.js i18n config structure

   The correct config uses the i18n object with locales array and defaultLocale string.

2. Step 2: Match options to correct syntax

   "i18n: { locales: ['en', 'fr'], defaultLocale: 'en' }" matches the exact syntax. Others use wrong keys or structure.

3. Final Answer:

   "i18n: { locales: ['en', 'fr'], defaultLocale: 'en' }" -> Option D

4. Quick Check:

   i18n config = locales + defaultLocale [OK]

Hint: Look for 'i18n' key with 'locales' and 'defaultLocale' [OK]

Common Mistakes:

• Using wrong keys like 'languages' or 'defaultLang'
• Not wrapping locales inside 'i18n' object
• Using arrays without keys

3. Given this Next.js page code snippet, what will be rendered if the URL is /fr?

import { useRouter } from 'next/router';
export default function Home() {
  const { locale } = useRouter();
  return <div>Current language: {locale}</div>;
}

medium

A. Current language: undefined

B. Current language: en

C. Current language: fr

D. Error: useRouter() not found

Solution

1. Step 1: Understand useRouter locale property

   The useRouter hook provides the current locale from the URL sub-path like /fr.

2. Step 2: Match URL to locale value

   Since URL is /fr, locale will be 'fr', so the rendered text is "Current language: fr".

3. Final Answer:

   Current language: fr -> Option C

4. Quick Check:

   URL /fr sets locale = 'fr' [OK]

Hint: Locale matches URL sub-path prefix [OK]

Common Mistakes:

• Assuming default locale always shows
• Thinking locale is undefined without explicit code
• Confusing useRouter hook usage

4. Identify the error in this Next.js next.config.js snippet for locale sub-path routing:

module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    localeDetection: true,
  },
};

medium

A. The config is correct and will enable sub-path routing with locale detection.

B. localeDetection is not a valid option inside i18n.

C. locales must include the default locale twice.

D. localeDetection should be localeDetection: false to enable sub-path routing.

Solution

1. Step 1: Check valid i18n config options

   Next.js supports localeDetection inside i18n to enable or disable automatic locale detection.

2. Step 2: Verify given config

   The config has valid keys and values. Setting localeDetection: true enables automatic detection, which is allowed.

3. Final Answer:

   The config is correct and will enable sub-path routing with locale detection. -> Option A

4. Quick Check:

   localeDetection is valid and true means enabled [OK]

Hint: Check Next.js docs for valid i18n keys [OK]

Common Mistakes:

• Thinking localeDetection is invalid
• Believing localeDetection must be false for sub-path routing
• Duplicating default locale in locales array

5. You want to create a Next.js app supporting English and French with sub-path routing. You want the default locale to be English and URLs like /fr/about to show French content. Which steps are needed to correctly configure this? A) Set i18n.locales to ['en', 'fr'] and defaultLocale to 'en' in next.config.js. B) Use useRouter() in pages to get locale and show language-specific content. C) Create folders or files under app or pages to handle routes for each locale. D) Disable locale detection to force manual locale switching.

hard

A. Only A, B, and C are needed.

B. All A, B, C, and D are needed.

C. Only A and B are needed.

D. Only B and D are needed.

Solution

1. Step 1: Configure locales and defaultLocale

   Setting i18n.locales and defaultLocale in next.config.js enables sub-path routing for English and French.

2. Step 2: Use useRouter to get locale and show content

   Using useRouter() to get locale helps render language-specific content dynamically.

3. Step 3: Organize routes for each locale

   Creating folders or files under app or pages supports localized routes like /fr/about.

4. Step 4: Evaluate locale detection setting

   Disabling locale detection is optional and not required to support sub-path routing correctly.

5. Final Answer:

   Only A, B, and C are needed. -> Option A

6. Quick Check:

   Locales config + useRouter + route files = correct setup [OK]

Hint: Remember: locale config + router + route files are key [OK]

Common Mistakes:

• Thinking disabling locale detection is mandatory
• Not creating route files for localized paths
• Ignoring useRouter for locale detection