nlit
Sign inGet started
Next.js localization guide

How to localize a Next.js app

next-intl is the go-to i18n library for the Next.js App Router. Your messages live in JSON, you wrap the app in a provider, and you read strings with a hook or a server-side helper. Here’s the setup plus how to auto-translate and keep the JSON in sync.

Start free — no cardView CLI docs

i18n in Next.js

The usual setup uses next-intl. next-intl loads a JSON messages file per locale, exposes strings through useTranslations() in client components and getTranslations() on the server, and integrates with the App Router’s locale segment. Messages are nested objects grouped by namespace.

messages/en.jsonjson
{
  "Home": {
    "greeting": "Hello, {name}!"
  }
}
app/[locale]/page.tsxtsx
import { useTranslations } from 'next-intl'

export default function Home() {
  const t = useTranslations('Home')
  return <h1>{t('greeting', { name: 'Sam' })}</h1>
}

Translate it with nlit

  1. 1Add your source-language strings to nlit as keys (import your existing files, or start fresh).
  2. 2Run AI auto-translate into every target language — the credit cost is shown before each run, and your glossary keeps brand terms intact.
  3. 3Review and approve, then pull the files into your repo with the CLI.
.nlit.yamlyaml
# .nlit.yaml
format: json-nested
output_dir: messages
platform: web
languages:
  - de
  - fr
  - ja
nlit pull → writessh
messages/
  de/
    Home.json
  fr/
    Home.json
  ja/
    Home.json

Format for Next.js: json-nested. See the CLI docs for every format and flag.

Things to watch for

  • next-intl uses single-brace {name} placeholders (ICU), not {{name}} — set your keys up accordingly in nlit so the exported syntax matches.
  • Server vs client: use getTranslations() in Server Components and useTranslations() in client ones; both read the same JSON nlit produces.
  • Group messages by namespace (module) so large apps stay organized and pull as separate files.

FAQ

What’s the best i18n library for the Next.js App Router?

next-intl is the most common choice for the App Router and works cleanly with JSON messages. next-i18next is still an option for the Pages Router.

How do I auto-translate a Next.js app?

Add your default-locale strings as keys in nlit, run AI auto-translate, review, then pull the JSON messages into your repo with the CLI before you build.

Can I run nlit pull in CI for Next.js?

Yes. Store an nlit API key as a CI secret, expose it as NLIT_TOKEN, and run nlit pull before next build so the bundle ships with the latest approved translations.

Ship Next.js in every language

Auto-translate your strings and pull them into your build. Free to start, no card.

Start free — no cardSee pricing