Internationalization (i18n) in Next.js

Q: What is internationalization, and how does it apply to a Next.js application?

Internationalization means preparing your application to support multiple languages and regions, such as translating text and formatting dates or currency differently depending on the visitor's locale. In Next.js, this usually involves structuring your routes and content so each supported language has its own clearly organized version.

Q: How would you structure your routes in the App Router to support multiple languages?

You add a dynamic locale segment as the first part of every route, such as app/[locale]/page.js, and read the locale parameter to determine which language's content and translations to load for that specific request, keeping your URL structure clean and predictable across every supported language.

Q: How can middleware help automatically detect a visitor's preferred language and redirect them accordingly?

Middleware can inspect the accept-language header sent by the browser, compare it against the languages your application supports, and redirect the visitor to the matching locale prefixed URL if they land on a page without one specified, giving each visitor a personalized starting experience.

Q: How would you set correct SEO metadata, such as the hreflang tags, for a multilingual Next.js website?

You generate alternate language links in your metadata for each translated version of a page, telling search engines which other language versions exist and how they relate to each other, which helps search engines show the correct language version of your site to users in different regions.

Q: What are best practices for managing translation content at scale in a large, multilingual Next.js application?

Store translations in structured files organized by language and feature, use a dedicated translation management library or service to keep them synchronized, avoid hardcoding text directly inside components, and consider working with a translation service or professional translators to ensure quality and cultural accuracy across all supported languages.

5 questions found

What is internationalization, and how does it apply to a Next.js application?

Beginner

Internationalization means preparing your application to support multiple languages and regions, such as translating text and formatting dates or currency differently depending on the visitor's locale. In Next.js, this usually involves structuring your routes and content so each supported language has its own clearly organized version.

// app/[locale]/page.js
export default function HomePage({ params }) {
  return <h1>Welcome</h1>; // translated based on locale
}

Real-world example A global retail website shows product prices in euros with French text for visitors from France, and in dollars with English text for visitors from the United States, using the same underlying application.

Common follow-ups: What is the difference between internationalization and localization?;Do you need a special library to add internationalization to Next.js?

Routing (App/Pages Router);Metadata API & SEO Optimization

How would you structure your routes in the App Router to support multiple languages?

Intermediate

You add a dynamic locale segment as the first part of every route, such as app/[locale]/page.js, and read the locale parameter to determine which language's content and translations to load for that specific request, keeping your URL structure clean and predictable across every supported language.

// app/[locale]/products/page.js
export default async function ProductsPage({ params }) {
  const { locale } = await params;
  const translations = await getTranslations(locale);
  return <h1>{translations.productsTitle}</h1>;
}

Real-world example A software company structures its documentation site with locale prefixed URLs like /en/docs and /es/docs, making it clear which language each page is written in for both users and search engines.

Common follow-ups: How do you handle a URL that does not include a locale segment?;What is the best way to organize translation files for a large application?

Dynamic Routes & Catch-All Segments;Metadata API & SEO Optimization

How can middleware help automatically detect a visitor's preferred language and redirect them accordingly?

Intermediate

Middleware can inspect the accept-language header sent by the browser, compare it against the languages your application supports, and redirect the visitor to the matching locale prefixed URL if they land on a page without one specified, giving each visitor a personalized starting experience.

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const preferredLocale = getPreferredLocale(request.headers.get('accept-language'));
  if (!request.nextUrl.pathname.startsWith(`/${preferredLocale}`)) {
    return NextResponse.redirect(new URL(`/${preferredLocale}${request.nextUrl.pathname}`, request.url));
  }
}

Real-world example A visitor from Germany opening a company's website without specifying a language is automatically redirected to the German version, thanks to middleware reading their browser's language preference.

Common follow-ups: What happens if a visitor's browser language is not one of the supported locales?;Should this redirect happen every visit or only the first time?

Middleware;Redirects & Rewrites Configuration

How would you set correct SEO metadata, such as the hreflang tags, for a multilingual Next.js website?

Advanced

You generate alternate language links in your metadata for each translated version of a page, telling search engines which other language versions exist and how they relate to each other, which helps search engines show the correct language version of your site to users in different regions.

export async function generateMetadata({ params }) {
  const { locale } = await params;
  return {
    alternates: {
      languages: {
        en: 'https://example.com/en/products',
        es: 'https://example.com/es/products'
      }
    }
  };
}

Real-world example A global e-commerce site adds hreflang metadata to every page, helping search engines correctly show French visitors the French version and Japanese visitors the Japanese version in search results.

Common follow-ups: What happens if hreflang tags are missing or incorrect on a multilingual site?;How do search engines use this information when ranking pages?

Metadata API & SEO Optimization;Routing (App/Pages Router)

What are best practices for managing translation content at scale in a large, multilingual Next.js application?

Advanced

Store translations in structured files organized by language and feature, use a dedicated translation management library or service to keep them synchronized, avoid hardcoding text directly inside components, and consider working with a translation service or professional translators to ensure quality and cultural accuracy across all supported languages.

// locales/en/common.json
{
  "welcome": "Welcome to our store",
  "cart": "Shopping Cart"
}

// locales/es/common.json
{
  "welcome": "Bienvenido a nuestra tienda",
  "cart": "Carrito de Compras"
}

Real-world example A large international company manages hundreds of translated strings across ten languages using organized JSON files per language, making it easy for translators to update content without touching any application code.

Common follow-ups: What tools help automate the translation workflow for large teams?;How do you handle pluralization differences between languages?

Data Fetching;Testing Next.js Applications