Next.js › Internationalization (i18n) in Next.js

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

Intermediate

Answer

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?