PricingLoginStart free
React Academy · Lektion

Opsætning af react-i18next

Installér og konfigurér i18next med sprogdetektering og opdeling i namespaces.

Lektion 1 af 413 trin

Opsætning af react-i18next er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du at installere og konfigurere react-i18next med sprogdetektion og opdeling i navnerum for at tilføje flersprogsunderstøttelse til en React-app.

Installation af afhængigheder

Installér i18next og react-i18next. Tilføj eventuelt i18next-browser-languagedetector til automatisk sprogdetektion og i18next-http-backend til indlæsning af oversættelser via HTTP.
npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

Oprettelse af i18n.js

Opret en `i18n.js`-fil, der initialiserer i18next. Kald `i18n.use(...)` for at tilføje plugins og `.init({...})` med din konfiguration.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: { en: { translation: {} }, tr: { translation: {} } },
    interpolation: { escapeValue: false },
  });

export default i18n;

Import af i18n i main.jsx

Importér initialiseringsfilen til i18n FØR du renderer appen. Det sikrer, at i18n er klar, før en komponent kalder useTranslation.
import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

Navnerum

Navnerum opdeler oversættelser i logiske grupper (f.eks. 'common', 'auth', 'dashboard'). Hvert navnerum er en separat JSON-fil, der indlæses efter behov for at reducere den oprindelige pakkestørrelse.
resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

Sprogdetektion

LanguageDetector-pluginet læser brugerens foretrukne sprog fra browseren (navigator.language), localStorage eller URL-forespørgselsstrengen. Det angiver automatisk det aktive sprog ved den første indlæsning.

Indlæsning af oversættelser fra public-mappen

Gem oversættelser som JSON-filer i `public/locales/{lang}/{ns}.json`. Konfigurér backend-pluginet til at indlæse dem under kørsel, så et nyt sprog kan tilføjes uden kodeændringer.
import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (valgfrit)

I18nextProvider omslutter din app for at gøre i18n-instansen tilgængelig via kontekst. Med react-i18next v11+ og initReactI18next-pluginet er dette valgfrit — hooket læser den globale i18n-instans direkte.

Kontrol af initialisering i komponenter

i18next indlæser oversættelser asynkront. Brug egenskaben `ready` fra useTranslation, eller kontrollér `i18n.isInitialized`, før du renderer tekst, så du undgår at vise oversættelsesnøgler.
const { t, ready } = useTranslation();
if (!ready) return null;

DevTools og håndtering af manglende nøgler

Angiv `saveMissing: true` under udvikling for at logge manglende oversættelsesnøgler i konsollen. Det hjælper dig med hurtigt at finde strenge, der ikke er oversat.
i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

Hurtigt tjek

Hvorfor skal du importere initialiseringsfilen til i18n, før du renderer din React-app?
Besvar den i den interaktive lektion

Opsummering

Installér i18next + react-i18next, opret i18n.js med plugins og init-konfiguration, importér den før rendering, og organisér oversættelser i navnerum. Brug http-backend til at indlæse oversættelsesfiler under kørsel.

Næste punkt

Næste lektion: **Brug af useTranslation-hooket** — du erstatter hardkodede strenge med t()-kald og organiserer JSON-filer til oversættelser.
Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Opsætning af react-i18next” gratis?

Ja — hele teksten til “Opsætning af react-i18next” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Opsætning af react-i18next”?

Installér og konfigurér i18next med sprogdetektering og opdeling i namespaces. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Opsætning af react-i18next”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Opsætning af react-i18next
  2. Brug af useTranslation-hooken
  3. Pluralisering og interpolation
  4. Sprogskifter og lazy loading af oversættelser
← Tilbage til React Academy