React Academy · Lektion

Konfigurera react-i18next

Installera och konfigurera i18next med språkidentifiering och uppdelning i namespaces.

Lektion 1 av 413 steg

Konfigurera react-i18next är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen installerar och konfigurerar du react-i18next med språkdetektering och uppdelning i namespaces för att lägga till stöd för flera språk i en React-app.

Installera beroenden

Installera i18next och react-i18next. Lägg vid behov till i18next-browser-languagedetector för automatisk detektering av locale och i18next-http-backend för att läsa in översättningar via HTTP.

npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

Skapa i18n.js

Skapa filen `i18n.js` som initierar i18next. Anropa `i18n.use(...)` för att lägga till plugins och `.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;

Importera i18n i main.jsx

Importera filen för i18n-initiering INNAN du renderar appen. Då är i18n redo innan någon komponent anropar 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>
);

Namespaces

Namespaces delar upp översättningar i logiska grupper, till exempel 'common', 'auth' och 'dashboard'. Varje namespace är en separat JSON-fil som läses in vid behov för att minska storleken på det initiala paketet.

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

Språkdetektering

Pluginen LanguageDetector läser användarens föredragna språk från webbläsaren (navigator.language), localStorage eller URL:ens frågesträng. Den ställer automatiskt in det aktiva språket vid den första inläsningen.

Läs in översättningar från public-mappen

Lagra översättningar som JSON-filer i `public/locales/{lang}/{ns}.json`. Konfigurera backend-pluginen så att filerna läses in vid körning. Då krävs ingen kodändring för att lägga till ett nytt språk.

import Backend from 'i18next-http-backend';

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

I18nextProvider (valfritt)

I18nextProvider wrappas runt appen för att tillhandahålla i18n-instansen via context. Med react-i18next v11+ och pluginen initReactI18next är detta valfritt – hooken läser den globala i18n-instansen direkt.

Kontrollera initiering i komponenter

i18next läser in översättningar asynkront. Använd egenskapen `ready` från useTranslation eller kontrollera `i18n.isInitialized` innan du renderar text, så att du inte visar översättningsnycklar.

const { t, ready } = useTranslation();
if (!ready) return null;

DevTools och hantering av saknade nycklar

Ange `saveMissing: true` under utveckling för att logga saknade översättningsnycklar i konsolen. Det hjälper dig att snabbt hitta oöversatta strängar.

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

Snabbkontroll

Varför måste du importera filen för i18n-initiering innan du renderar React-appen?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Installera i18next och react-i18next, skapa i18n.js med plugins och init-konfiguration, importera den innan rendering och organisera översättningarna i namespaces. Använd http-backend för att läsa in översättningsfiler vid körning.

Nästa steg

Nästa lektion: **Använda useTranslation-hooken** — ni kommer att ersätta hårdkodade strängar med t()-anrop och organisera JSON-filer för översättningar.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera react-i18next” gratis?

Ja – hela texten till ”Konfigurera react-i18next” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfigurera react-i18next”?

Installera och konfigurera i18next med språkidentifiering och uppdelning i namespaces. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Konfigurera react-i18next”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera react-i18next
Använda useTranslation-hooken
Pluralisering och interpolation
Språkväljare och lazy loading av översättningar

← Tillbaka till React Academy