Examius

🌍 NextJS · subject

NextJS Internationalization (i18n) Syllabus

The Internationalization (i18n) syllabus for NextJS in full: 3 chapters and 9 topics, every one listed below, plus 51 Internationalization (i18n) flashcards with answers.

3Chapters
9Topics
51Flashcards

Internationalization (i18n) syllabus: all 3 chapters

Expand any chapter to see its topics and sub-topics.

  1. Setting Up i18n

     3 topics
    • Configuration
    • Locale Detection
    • Routing with Locales

  2. Handling Translations

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

  3. SEO Considerations

     3 topics
    • Localized Meta Tags
    • Localized Sitemap
    • Handling Hreflang

NextJS Internationalization (i18n) flashcards — 51 questions with 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.

  19. What must you export from a Next.js App Router page/layout so that all locale routes are statically generated at build time?

    An async `generateStaticParams` function returning an array of param objects, one per locale (e.g., `[{ lang: 'en' }, { lang: 'fr' }]`).

  20. What is a translation (message) file, and what format is most commonly used in Next.js i18n?

    A file storing key-to-translated-string mappings for one locale, most commonly a JSON file (e.g., en.json, fr.json) with nested keys grouping related strings.

Show the other 31 Internationalization (i18n) flashcards

  1. Give an example of a simple translation JSON structure for an "en" locale with a greeting.

    For example: `{ "home": { "title": "Welcome", "greeting": "Hello" } }`, accessed via a key path like home.title.

  2. In a manual App Router i18n setup, what is a "dictionary loader" and why is it often a dynamic import?

    It's a function mapping a locale to its translation file, e.g. using `import(`./dictionaries/${locale}.json`)`. Dynamic import ensures only the needed locale's messages are loaded server-side rather than bundling all locales.

  3. Why is loading translation dictionaries in Server Components advantageous for bundle size?

    Because the translation JSON is loaded and rendered on the server, so the message data does not need to be shipped to the client, keeping the client JavaScript bundle smaller.

  4. Name three popular third-party i18n libraries used with Next.js for managing translations.

    next-intl, next-i18next (built on i18next/react-i18next), and react-intl (FormatJS).

  5. What distinguishes "static" translations from "dynamic" translations in an i18n app?

    Static translations are fixed UI strings known at build time (labels, buttons). Dynamic translations depend on runtime values—interpolated variables, pluralization, or content fetched from a CMS/database.

  6. What is "interpolation" in dynamic translations, and give an example pattern?

    Interpolation inserts runtime variables into a translation string using placeholders, e.g. `"welcome": "Hello, {name}!"` where {name} is replaced with an actual value at render time.

  7. Why can't you simply concatenate strings to build translated sentences with variables?

    Because word order, grammar, and placeholder position differ across languages; concatenation breaks translations. Interpolation with named placeholders lets translators reposition variables per language.

  8. What is pluralization handling in i18n, and why is it needed?

    It selects the correct message form based on a count, because languages have different plural rules (English has one/other; others like Arabic or Polish have several categories like zero/one/two/few/many/other).

  9. Which JavaScript standard API do modern i18n libraries use for locale-aware plural category selection?

    The Intl.PluralRules API, which returns the plural category (e.g., "one", "other") for a given number in a given locale.

  10. Which built-in browser/Node API is used for locale-aware number and currency formatting?

    Intl.NumberFormat, e.g. `new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5)`.

  11. Which built-in API is used for locale-aware date and time formatting in i18n?

    Intl.DateTimeFormat, e.g. `new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date())`.

  12. What is a "fallback language" (fallback locale) in i18n?

    A default locale whose translations are used when a requested locale is unavailable or is missing a specific key, ensuring the user always sees some text instead of a broken/blank string.

  13. What behavior should occur when a translation key is missing in the active locale but present in the fallback locale?

    The i18n system should fall back to the fallback locale's value for that key (key-level fallback), so the UI shows the fallback text rather than the raw key or an empty string.

  14. In next-i18next / i18next, which configuration option sets the fallback language?

    The `fallbackLng` option, which can be a single locale string, an array of ordered fallbacks, or an object mapping locales to their fallbacks.

  15. What is a "fallback chain" in locale resolution?

    An ordered sequence of locales tried in turn when a key is missing, e.g. pt-BR → pt → en, so a regional locale falls back to its base language and then to a global default.

  16. When a specific regional locale like en-GB lacks a string, what is the natural first fallback before the global default?

    Its base language locale (en), since regional variants typically differ only in some strings while sharing most of the base language's translations.

  17. What are localized meta tags, and which SEO-relevant tags do they usually include?

    Meta tags whose content is translated per locale—commonly the page <title>, meta description, and Open Graph/Twitter tags—so search results and social previews appear in the user's language.

  18. In the Next.js App Router, which function is used to produce localized meta tags per route?

    The `generateMetadata` async function exported from a page or layout, which receives `params` (including the locale) and returns a localized Metadata object.

  19. Within generateMetadata, how do you produce translated title and description values?

    Read the locale from params, load that locale's dictionary/translations, and set the title and description fields of the returned Metadata object to the translated strings.

  20. Which HTML attribute on the <html> element should reflect the current locale for accessibility and SEO?

    The `lang` attribute, e.g. `<html lang="fr">`, which tells browsers, screen readers, and search engines the page's language.

  21. In the App Router, where is the correct place to set the <html lang> attribute per locale?

    In the localized root layout at app/[lang]/layout.tsx, setting `<html lang={params.lang}>` using the current locale param.

  22. What is a sitemap, and what is a localized sitemap?

    A sitemap is an XML file listing a site's URLs to help search engines crawl them. A localized sitemap additionally lists each URL's localized variants and their language relationships so search engines index all language versions.

  23. In the Next.js App Router, which special file generates a sitemap, and what does its default export return?

    app/sitemap.ts (or sitemap.js); it default-exports a function returning an array of sitemap entry objects, each with fields like url, lastModified, changeFrequency, and priority.

  24. How do you represent alternate-language URLs inside a Next.js sitemap entry?

    Add an `alternates` property with a `languages` object mapping each locale code to its URL, e.g. `alternates: { languages: { en: '.../en', fr: '.../fr' } }`, which emits xhtml:link hreflang entries.

  25. What is the hreflang attribute used for in HTML/sitemaps?

    It tells search engines which language and optionally region a given URL targets, so the correct localized version is shown to users based on their language/location, avoiding duplicate-content penalties across translations.

  26. What are the two valid places to declare hreflang annotations for a page?

    In the HTML <head> as `<link rel="alternate" hreflang="..." href="...">` tags, or as xhtml:link alternate entries within the XML sitemap. (HTTP Link headers are a third option.)

  27. Write the format of an hreflang link tag pointing the French version to a URL.

    `<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />`

  28. What is the special hreflang value `x-default`, and when is it used?

    `x-default` designates the fallback/default page for users whose language/region doesn't match any listed hreflang value—typically a language selector or the default-locale page.

  29. What is the reciprocity (bidirectional) rule for hreflang annotations?

    hreflang links must be mutual: if page A lists page B as an alternate, page B must also list page A. Missing return links cause search engines to ignore the annotations.

  30. What format must the hreflang value use to specify both a language and a region, e.g., Brazilian Portuguese?

    An ISO 639-1 language code optionally followed by a hyphen and an ISO 3166-1 Alpha-2 region code, e.g. `pt-BR` (language first, then region). Region alone is not allowed.

  31. When generating hreflang tags in the App Router, which Metadata field produces `<link rel="alternate" hreflang>` tags?

    The `alternates.languages` field of the Metadata object (returned from generateMetadata), which Next.js renders as the appropriate hreflang alternate link tags.

NextJS Internationalization (i18n) FAQ

What is in the NextJS Internationalization (i18n) syllabus?

NextJS Internationalization (i18n) is split into 3 chapters: Setting Up i18n, Handling Translations and SEO Considerations. Together they contain 9 topics.

How many chapters are in NextJS Internationalization (i18n)?

3 chapters, containing 9 topics. The largest chapter is Setting Up i18n, with 3 topics.

Are there flashcards for NextJS Internationalization (i18n)?

Yes — a 51-card Internationalization (i18n) deck, printed in full in the flashcards section of this page and available in the Examius app with spaced repetition. The free plan covers one exam of your choice, including its flashcards; Examius Pro, a one-time purchase, unlocks every other exam and deck.