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.