NextJS Internationalization (i18n) Syllabus

Internationalization (i18n) syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Internationalization (i18n) in NextJS, not a summary of it.

1. 1

   Setting Up i18n

   3 topics

   • Configuration
   • Locale Detection
   • Routing with Locales
2. 2

   Handling Translations

   3 topics

   • Using Translation Files
   • Dynamic Translations
   • Fallback Languages
3. 3

   SEO Considerations

   3 topics

   • Localized Meta Tags
   • Localized Sitemap
   • Handling Hreflang

Internationalization (i18n) flashcards for NextJS

18 of 51 cards from the Internationalization (i18n) deck — real questions with worked answers.

1. What does the abbreviation "i18n" stand for, and why is it written that way?

   It stands for "internationalization." The 18 represents the 18 letters between the first "i" and the last "n" in the word.

2. In i18n terminology, what is the difference between internationalization (i18n) and localization (l10n)?

   Internationalization (i18n) is designing/building the app so it CAN support multiple languages and regions. Localization (l10n) is the act of adapting that app to a specific locale (translating text, formatting dates/currency, etc.).

3. What is a "locale" in the context of Next.js i18n?

   A locale is an identifier for a language and optional regional formatting preference, typically following BCP 47 (e.g., en-US, fr, pt-BR). It determines which translations and formatting rules to apply.

4. In the Next.js App Router, what is the standard way to structure routes for multiple locales?

   Use a dynamic segment such as app/[lang]/ (or app/[locale]/), placing all localized pages inside it so the locale becomes the first path segment, e.g., /en/about and /fr/about.

5. In the legacy Next.js Pages Router, which config file key enables built-in i18n routing?

   The i18n key inside next.config.js, e.g. `i18n: { locales: ['en','fr'], defaultLocale: 'en' }`.

6. In the Pages Router i18n config, what do the `locales` and `defaultLocale` fields specify?

   `locales` is the array of all supported locale codes; `defaultLocale` is the fallback/default locale served at the root path when no locale is specified.

7. Why does the Next.js App Router NOT have a built-in i18n config like the Pages Router?

   Because with React Server Components and the App Router, routing and rendering are handled differently, so i18n routing is implemented manually via a [lang] dynamic segment plus middleware, giving developers full control.

8. What are the two main built-in routing sub-strategies offered by the Pages Router i18n config?

   Sub-path routing (locale in the URL path, e.g., /fr/products) and domain routing (locale mapped to a specific domain, e.g., example.fr).

9. In the Pages Router, how do you map locales to specific domains instead of URL sub-paths?

   Use the `domains` array inside the i18n config, where each entry specifies a `domain`, its `defaultLocale`, and optionally a list of `locales`.

10. What is the purpose of locale detection in a Next.js app?

    To automatically determine a user's preferred language on their first visit (usually from the request) and route or serve content in that language without requiring manual selection.

11. Which HTTP request header is the primary source used for automatic locale detection?

    The Accept-Language header, which the browser sends listing the user's preferred languages in order of preference.

12. In the Accept-Language header, what does the "q" value (quality value) represent, as in `fr;q=0.8`?

    The q value is a relative weight/priority from 0 to 1 indicating how strongly the user prefers that language; higher q means higher preference (default is $q = 1$).

13. Which two npm libraries are commonly recommended in Next.js docs to parse Accept-Language and match the best locale?

    @formatjs/intl-localematcher (for matching) and negotiator (for parsing the Accept-Language header into an ordered list of languages).

14. When implementing locale detection in the App Router, in which file is the redirect-to-detected-locale logic typically placed?

    In middleware.ts (Next.js Middleware), which runs before the request completes and can redirect the user to the appropriate locale-prefixed URL.

15. What is the standard "matcher" concern when using middleware for locale routing?

    You must configure the middleware `matcher` to skip static assets, API routes, and internal paths (like /_next, favicon, files with extensions) so it only runs on page requests that need locale redirection.

16. Besides the Accept-Language header, what is a common way to remember a returning user's chosen locale?

    Persisting the choice in a cookie (e.g., a NEXT_LOCALE cookie) and reading it in middleware, which takes precedence over Accept-Language for returning users.

17. In the Pages Router, which special value of `defaultLocale` behavior disables automatic locale detection?

    Setting `localeDetection: false` in the i18n config disables the automatic Accept-Language based detection/redirect.

18. In the App Router, how does a server component page access the current locale from the URL?

    Through the route params, e.g. the page receives `params` containing `{ lang }` (the dynamic [lang] segment), which it reads to load the right translations.

See more Internationalization (i18n) flashcards →

Planning Internationalization (i18n) for NextJS

Internationalization (i18n) (NextJS) FAQ