Skip to main content

Den komplette guiden til React-internasjonalisering

Fra null til flerspråklig: sett opp i18n i React-appen din, og automatiser deretter oversettelser med AI.

1

Installer pakker

Du trenger tre pakker: react-i18next (React-bindingene), i18next (kjernebiblioteket), og valgfritt i18next-browser-languagedetector for automatisk deteksjon av språk.

react-i18next tilbyr React-hooks og -komponenter. i18next er kjernemotoren som håndterer lasting av oversettelser, interpolasjon og flertallsformer. Programtillegget for språkdeteksjon leser nettleserens språkpreferanse automatisk.
Terminal
npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backend
2

Konfigurer i18n-instansen

Opprett en i18n-konfigurasjonsfil som initialiserer i18next med standardspråket ditt, oversettelsesressurser og kjeden av programtillegg. Denne filen må importeres ved appens inngangspunkt før noen komponent rendres.

src/i18n.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)  // Must come before .init()
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,  // React already escapes
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;
«You will need to pass in an i18next instance by using initReactI18next» — denne feilen betyr at du har glemt å kalle i18n.use(initReactI18next) før i18n.init(). .use()-kallet må komme før .init().
3

Pakk inn appen din med I18nextProvider

Importer i18n-konfigurasjonsfilen din ved appens rot og pakk komponenttreet inn med I18nextProvider. Uten dette returnerer useTranslation() rå nøkler i stedet for oversatt tekst.

src/main.tsx
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';  // Import your config
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <I18nextProvider i18n={i18n}>
        <App />
      </I18nextProvider>
    </Suspense>
  </React.StrictMode>
);
Hvis oversettelser viser rå nøkler som «welcome» i stedet for «Welcome to our app», er den vanligste årsaken en manglende I18nextProvider eller at i18n-konfigurasjonsfilen ikke er importert.
4

Opprett oversettelsesfiler

Opprett én JSON-fil per språk. Bruk nøstede nøkler for å organisere strenger etter funksjon eller side. Behold kildespråket ditt (vanligvis engelsk) som den eneste autoritative kilden.

public/locales/en/translation.json
// public/locales/en/translation.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "settings": "Settings"
  },
  "greeting": "Hello, {{name}}!",
  "cart": {
    "itemCount_one": "{{count}} item",
    "itemCount_other": "{{count}} items"
  }
}

// public/locales/de/translation.json
{
  "nav": {
    "home": "Startseite",
    "about": "Über uns",
    "settings": "Einstellungen"
  },
  "greeting": "Hallo, {{name}}!",
  "cart": {
    "itemCount_one": "{{count}} Artikel",
    "itemCount_other": "{{count}} Artikel"
  }
}
Navngi nøkler etter det de beskriver, ikke hvor de vises: «cart.itemCount» er bedre enn «homepageCartLabel». Nøkler bør overleve redesign av brukergrensesnittet.
5

Bruk oversettelser i komponenter

Kall useTranslation() i en hvilken som helst komponent for å få t()-funksjonen. Bruk den for enkle strenger, interpolerte variabler, og JSX-innebygde oversettelser med Trans-komponenten.

Greeting.tsx
import { useTranslation } from 'react-i18next';

function Greeting({ userName }: { userName: string }) {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('greeting', { name: userName })}</h1>
      <nav>
        <a href="/">{t('nav.home')}</a>
        <a href="/about">{t('nav.about')}</a>
      </nav>
    </div>
  );
}
Trans component for JSX
import { Trans, useTranslation } from 'react-i18next';

// For JSX inside translations:
// "terms": "By signing up, you agree to our <link>Terms</link>."

function SignUp() {
  const { t } = useTranslation();
  return (
    <Trans i18nKey="terms" components={{
      link: <a href="/terms" className="underline" />
    }} />
  );
}
Dynamiske nøkler som t(`error.$'{code}'`) fungerer under kjøring, men kan ikke hentes ut statisk av verktøy som i18next-scanner. Hvis du bruker uthentingsverktøy, må du liste opp dynamiske nøkler eksplisitt eller bruke et kommentarhint.
6

Håndter flertallsformer og variabler

i18next håndterer flertallsformer ved hjelp av CLDR-regler — ikke bare entall/flertall. Arabisk har 6 former (zero, one, two, few, many, other). Japansk har 1 (other). Definer alle nødvendige former i oversettelsesfilene dine, så velger i18next automatisk den riktige.

Plural forms by language
// English: 2 forms (one, other)
{
  "itemCount_one": "{{count}} item",
  "itemCount_other": "{{count}} items"
}

// Arabic: 6 forms (zero, one, two, few, many, other)
{
  "itemCount_zero": "لا عناصر",
  "itemCount_one": "عنصر واحد",
  "itemCount_two": "عنصران",
  "itemCount_few": "{{count}} عناصر",
  "itemCount_many": "{{count}} عنصرًا",
  "itemCount_other": "{{count}} عنصر"
}

// Japanese: 1 form (other)
{
  "itemCount_other": "{{count}}個のアイテム"
}
Hardkod aldri count === 1 for å oppdage entall. Språk som fransk behandler 0 som entall. Russisk, arabisk og polsk har former engelsk ikke har. La i18next håndtere flertallsreglene.
7

Legg til språkbytte og -deteksjon

Bygg en språkvelger som kaller i18n.changeLanguage(). Kombiner den med nettleserens språkdetektor for automatisk å oppdage brukerens foretrukne språk ved første besøk, og lagre deretter det eksplisitte valget deres.

LanguageSwitcher.tsx
import { useTranslation } from 'react-i18next';

const LANGUAGES = [
  { code: 'en', label: 'English' },
  { code: 'de', label: 'Deutsch' },
  { code: 'ja', label: '日本語' },
  { code: 'es', label: 'Español' },
];

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  return (
    <select
      value={i18n.language}
      onChange={(e) => i18n.changeLanguage(e.target.value)}
    >
      {LANGUAGES.map(({ code, label }) => (
        <option key={code} value={code}>{label}</option>
      ))}
    </select>
  );
}
Hvis du bruker SSR (Next.js, Remix), kan serveren oppdage et annet språk enn klienten (serveren har ingen nettleserpreferanser). Dette forårsaker et hydreringsavvik. Løsning: send det oppdagede språket fra serveren til klienten som en prop eller cookie, slik at begge rendrer samme språk.
8

Automatiser oversettelser

Når i18n-oppsettet ditt er ferdig, kan du oversette språkfilene dine ved hjelp av AI. Be AI-assistenten din i IDE-en om å oversette kildefilen din, eller bruk i18n Agent CLI i CI/CD-pipelinen din.

Terminal
# In your IDE, ask your AI assistant:
> Translate public/locales/en/translation.json to German, Japanese, and Spanish

✓ de/translation.json created (1.2s)
✓ ja/translation.json created (1.5s)
✓ es/translation.json created (1.1s)

# Or use the CLI in CI/CD:
npx i18n-agent translate public/locales/en/translation.json --lang de,ja,es
Oversett inkrementelt — når du legger til nye nøkler i kildefilen din, oversetter du bare diffen i stedet for å regenerere alle filene. Dette bevarer eventuelle oversettelser som er gjennomgått av mennesker.

Automatiser oversettelseskvalitet

Fang opp manglende nøkler og ødelagte plassholdere før lansering med i18n-validate. Test brukergrensesnittet ditt med fiktive oversettelser ved hjelp av i18n-pseudo før de ekte oversettelsene kommer.

Vanlige fallgruver

Oversettelser viser rå nøkler

Årsaker: manglende I18nextProvider, i18n-konfigurasjonen er ikke importert ved appens rot, navnerommet er ikke lastet, eller oversettelsene lastes fortsatt asynkront. Sjekk nettleserkonsollen med debug: true for å finne spor.

Suspense-feil uten reserveløsning

«A component suspended while responding to synchronous input» — legg til en '&lt;Suspense&gt;'-grense rundt appen din, eller sett useSuspense: false i i18next-init-konfigurasjonen.

SSR-hydreringsavvik

Serveren rendrer med ett språk, klienten hydrerer med et annet. Sørg for at begge bruker samme språkkilde — send det som en prop fra serveren, ikke stol utelukkende på nettleserdeteksjon.

Ingen autofullføring for oversettelsesnøkler

Utvid i18next-modulen med ressurstypen din: declare module 'i18next' '{ interface CustomTypeOptions { resources: typeof resources } }'. Dette gir deg typesikre t()-kall med autofullføring.

Anbefalt filstruktur

Project Structure
my-react-app/
├── public/
│   └── locales/
│       ├── en/
│       │   ├── translation.json    # Default namespace
│       │   ├── common.json         # Shared strings
│       │   └── dashboard.json      # Feature namespace
│       ├── de/
│       │   ├── translation.json
│       │   ├── common.json
│       │   └── dashboard.json
│       └── ja/
│           └── ...
├── src/
│   ├── i18n.ts                     # i18n configuration
│   ├── main.tsx                    # App entry with Provider
│   ├── App.tsx
│   └── components/
│       └── LanguageSwitcher.tsx
└── package.json

Oversett også:

Prøv i18n Agent nå

Slipp oversettelsesfilen din her

JSON, YAML, PO, XML, CSV, Markdown, Properties

eller klikk for å bla gjennom

Målspråk

Ingen registrering krevesUmiddelbart estimat

Ofte stilte spørsmål