Sub-path routing for locales in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is sub-path routing for locales in Next.js?

Sub-path routing for locales means using a part of the URL path to show the language or region, like '/en' for English or '/fr' for French. It helps users see the site in their language by changing the URL prefix.

beginner

How do you enable sub-path routing for locales in Next.js?

You enable it by setting the 'locales' and 'defaultLocale' options in the 'i18n' section of 'next.config.js'. Next.js then adds the locale as a path prefix automatically.

beginner

What does the URL look like with sub-path routing for the French locale?

The URL will start with '/fr', for example, 'https://example.com/fr/about' to show the French version of the About page.

intermediate

How does Next.js handle navigation between locales with sub-path routing?

Next.js updates the URL path prefix to the selected locale automatically when you use the 'next/link' component or the 'router.push' method with locale options.

intermediate

Why is sub-path routing better than query parameters for locales?

Sub-path routing is clearer and better for SEO because the language is part of the URL path, making it easier for search engines and users to understand the page language.

Which part of the URL represents the locale in sub-path routing?

A A cookie value

B A query parameter (e.g., '?lang=en')

C The first segment after the domain (e.g., '/en')

D The file extension

In sub-path routing, the locale is shown as the first part of the URL path, like '/en' or '/fr'.

Where do you configure locales for sub-path routing in Next.js?

A In 'next.config.js' under the 'i18n' key

B In a '.env' file

C Inside each page component

D In the 'package.json' file

Locales and sub-path routing are configured in 'next.config.js' inside the 'i18n' section.

What happens if you visit a URL without a locale prefix when sub-path routing is enabled?

A Next.js redirects to the default locale with the prefix

B The page shows an error

C The page loads without any locale

D The locale is guessed from the browser language but URL stays the same

Next.js redirects to the default locale path prefix to keep URLs consistent.

How do you programmatically change the locale with sub-path routing in Next.js?

A Change the URL query string manually

B Use 'router.push' with the 'locale' option

C Reload the page with a different cookie

D Use a custom server to rewrite URLs

You use Next.js router's 'push' method and pass the new locale to update the URL path prefix.

Which benefit does sub-path routing provide over query parameters for locales?

A Automatic translation of content

B Faster page loading

C Smaller bundle size

D Better SEO and clearer URLs

Sub-path routing improves SEO and makes URLs clearer by including the locale in the path.

Explain how sub-path routing for locales works in Next.js and how you set it up.

Think about how the URL changes and where you tell Next.js about your languages.

Describe the advantages of using sub-path routing for locales compared to other methods like query parameters.

Consider what users and search engines see in the URL.

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