Add internationalization to a Next.js site

Making a Next.js site multilingual is mostly about three things done consistently: routing by language, storing translations cleanly, and telling search engines how the versions relate. Get those right and the rest follows.

Put the locale in the URL

Each language should live at its own path: /en/about, /fr/about. The App Router supports a locale segment, so you structure routes under a [locale] folder and read the active language from the URL.

The important rule is that the locale belongs in the URL, not only in a cookie or an Accept-Language header. A URL-based locale is crawlable and shareable; a cookie-based one hides every language but the default from search engines and from anyone you send a link to.

Store translations separately

Keep strings out of your components, in per-locale files keyed by a stable identifier:

// en.json
{ "cta.contact": "Get in touch" }
// fr.json
{ "cta.contact": "Contactez-moi" }

Components look up the key for the current locale:

<button>{t("cta.contact")}</button>

This keeps translation separate from code, so a translator works on the files without touching components, and adding a language is adding a file.

Tell search engines with hreflang

Search engines need to know that /en/about and /fr/about are the same page in different languages, or they may treat them as duplicates. hreflang alternates make the relationship explicit. In the App Router, set them in the metadata:

alternates: {
  languages: {
    "en": "/en/about",
    "fr": "/fr/about",
  },
}

Now each version points at the others, and search shows the right language to the right user.

The pieces together

Locale in the path for crawlable, shareable pages. Translations in per-locale files, separate from code. hreflang so search engines connect the versions. That is the backbone of a multilingual Next.js site. Add a language picker on top for humans, but build on those three foundations first, because they are what make the other languages actually reachable and correctly understood.