Sub-path routing for locales in NextJS - Mini Project: Build & Apply

Sub-path routing for locales in Next.js

📖 Scenario: You are building a website that supports two languages: English and Spanish. You want users to see the language in the URL as a sub-path, like /en for English and /es for Spanish.

🎯 Goal: Create a Next.js app that uses sub-path routing to show content in English or Spanish based on the URL prefix /en or /es.

📋 What You'll Learn

Create a Next.js page component that shows a greeting message.

Add a configuration variable to define supported locales.

Use Next.js routing to detect the locale from the URL sub-path.

Render the greeting message in the correct language based on the locale.

💡 Why This Matters

🌍 Real World

Many websites support multiple languages and show the language in the URL to help users and search engines understand the content language.

💼 Career

Knowing how to implement locale-based routing is important for building internationalized web apps that reach a global audience.

1

Create the greeting messages object

Create a constant called greetings that is an object with two keys: en and es. Set en to the string 'Hello!' and es to the string '¡Hola!'.

NextJS

# Create the greetings object with keys 'en' and 'es'
# Your code here

Hint

Use const greetings = { en: 'Hello!', es: '¡Hola!' }.

2

Define supported locales array

Create a constant called locales that is an array containing the strings 'en' and 'es'.

NextJS

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

# Create an array called locales with 'en' and 'es'
# Your code here

Hint

Use const locales = ['en', 'es'];.

3

Create the Next.js page component with locale detection

Create a default exported React functional component called HomePage. Use the Next.js useRouter hook to get the router object. Get the locale using router.locale, defaulting to 'en' if not present. Render a <main> element with a <h1> that shows the greeting message from greetings for the detected locale.

NextJS

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

const locales = ['en', 'es'];

// Import useRouter from 'next/router'
// Create HomePage component
// Use useRouter to get router.locale || 'en'
// Render {greetings[locale]}
# Your code here

Hint

Use const locale = router.locale || 'en';

4

Add Next.js config for i18n sub-path routing

Create a next.config.js file exporting an object with an i18n property. Set locales to the locales array and defaultLocale to 'en'. This enables Next.js sub-path routing for locales.

NextJS

import { useRouter } from 'next/router';

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

const locales = ['en', 'es'];

export default function HomePage() {
  const router = useRouter();
  const locale = router.locale || 'en';
  return (
    
      {greetings[locale]}
    
  );
}

// Create next.config.js with i18n config
# Your code here

Hint

Use module.exports = { i18n: { locales: ['en', 'es'], defaultLocale: 'en' } }.

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