[Next.js]

Wrap strings for react-i18next without breaking your catalogs

Polyglot finds your src/locales layout, merges new keys into it, and wraps call sites with useTranslation — flagging anything it can't wire instead of breaking it.

1 Min. LesezeitAlle Frameworks

react-i18next projects keep catalogs in more places than any other ecosystem — public/locales, src/locales, inline resources objects. Polyglot detects the file-based layouts and merges into them; when your dictionaries are inline (nothing on disk to merge into), it flags every string with a fix recipe instead of writing a catalog your app would never load.

The transformation

Before — src/app/page.tsx
"use client";

export default function Page() {
    return (
        <main>
            <h1>Welcome back</h1>
            <p>Your projects are ready</p>
            <input placeholder="Search projects" />
        </main>
    );
}
After — src/app/page.tsx
"use client";
import { useTranslation } from "react-i18next";

export default function Page() {
  const { t } = useTranslation();
    return (
        <main>
            <h1>{t('welcome_back')}</h1>
            <p>{t('your_projects_are_ready')}</p>
            <input placeholder={t('search_projects')} />
        </main>
    );
}

Keys merge into your layout

This fixture keeps catalogs in src/locales/<lng>/<ns>.json — Polyglot found them and merged, preserving existing keys and their order:

Merged into — src/locales/en/common.json
{
  "existing_key": "Already translated",
  "search_projects": "Search projects",
  "your_projects_are_ready": "Your projects are ready",
  "welcome_back": "Welcome back"
}
Merged into — src/locales/de/common.json
{
  "existing_key": "Bereits übersetzt",
  "search_projects": "Search projects",
  "your_projects_are_ready": "Your projects are ready",
  "welcome_back": "Welcome back"
}

Honest failure beats silent breakage

Three behaviors you won't get from a find-and-replace script:

  • A component whose t comes from useTranslation('ns', { keyPrefix }) gets keys nested under that prefix, called relatively — resolution-correct at runtime.
  • A string whose text already exists in the bound namespace reuses the existing key.
  • A setup Polyglot can't statically join (computed catalog paths, inline resources) produces a flagged report, not broken lookups.
✓ 3 strings auto-wrapped · 0 flagged for manual review · 0 unsafe transforms → polyglot-i18n-report.md
✓ wiring checks passed (1 injected import(s), 3 catalog value(s), 2 catalog file(s))

Try it

$ curl -fsSL https://getpolyglot.ai/install.sh | bash
$ polyglot init --framework nextjs
$ polyglot scan
$ polyglot wrap
$ polyglot translate --languages de   # 50 strings free, no signup

Im Terminal starten

Schluss mit der Suche nach unübersetzten Strings.

Installieren Sie die CLI, führen Sie einen Scan durch und sehen Sie genau, was Ihnen fehlt. Kostenlos, kein Konto erforderlich.

$curl -fsSL https://getpolyglot.ai/install.sh | bash
Wrap strings for react-i18next without breaking your catalogs | Polyglot