Sub-path routing for locales in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered URL path for the French locale?

Given a Next.js app configured with sub-path routing for locales, if the user selects French (fr) locale, what will be the URL path for the home page?

NextJS

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

// User navigates to home page with locale 'fr'

A /home/fr

B /en/fr

C /?locale=fr

D /fr

💡 Hint

Think about how Next.js adds locale prefixes as sub-paths by default.

Next.js adds the locale as a sub-path prefix for routing when using sub-path routing. For French locale, the home page URL becomes /fr.

📝 Syntax

intermediate

Which Next.js config correctly enables sub-path routing for locales?

Select the Next.js configuration snippet that correctly enables sub-path routing for English and Spanish locales with English as default.

A

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

B

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

C

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

D

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

💡 Hint

Check the official Next.js i18n config options for sub-path routing.

Next.js enables sub-path routing by default when you specify locales and defaultLocale. The localeDetection option controls automatic locale detection but does not disable sub-path routing.

❓ state_output

advanced

What locale is active after navigating to /es/about?

In a Next.js app with locales ['en', 'es', 'fr'] and defaultLocale 'en', if the user visits the URL path '/es/about', what is the active locale in the app?

A fr

B en

C es

D undefined

💡 Hint

The locale is determined by the first segment of the URL path when using sub-path routing.

Next.js uses the first path segment to detect the locale when sub-path routing is enabled. Here, '/es/about' means the locale is 'es' (Spanish).

🔧 Debug

advanced

Why does the locale sub-path not appear in URLs?

A developer configures Next.js with locales ['en', 'fr'] and defaultLocale 'en'. However, when navigating, URLs do not show '/fr' prefix for French locale. What is the most likely cause?

NextJS

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

A The developer forgot to set the 'locale' property in next.config.js

B The developer is using 'defaultLocale' as 'en', so URLs for 'en' do not get a prefix, but French URLs should have '/fr'

C The developer is using 'localeDetection: true' which disables sub-path routing

D The app is running in development mode which disables locale sub-paths

💡 Hint

Remember how Next.js handles defaultLocale URLs.

Next.js does not add the locale prefix for the defaultLocale to keep URLs clean. So URLs for 'en' won't have '/en', but URLs for 'fr' should have '/fr'. If '/fr' is missing, it might be a navigation or link issue.

🧠 Conceptual

expert

How does Next.js handle locale sub-path routing with middleware?

In Next.js, when using middleware to rewrite URLs for locale sub-path routing, what is the primary purpose of the middleware?

A To detect user locale and redirect to the correct locale sub-path before rendering

B To disable locale sub-path routing and serve all locales under root path

C To statically generate pages for each locale at build time

D To inject locale-specific CSS styles dynamically

💡 Hint

Middleware runs before the request reaches the page and can modify the request or response.

Middleware in Next.js can detect the user's preferred locale and redirect them to the appropriate locale sub-path URL before the page renders, enabling seamless locale routing.