Next.js App Router mit react-i18next: Vollständiges i18n-Tutorial 2026

Schnelle Antwort

Um react-i18next mit Next.js App Router zu verwenden: Installieren Sie react-i18next i18next, erstellen Sie eine i18n-Konfigurationsdatei und verwenden Sie den useTranslation Hook.

Projekt-Setup

TerminalCopy
npm install react-i18next i18next i18next-resources-to-backend

Übersetzungsdateien

locales/de/common.json:

JSONCopy
1{
2  "titel": "Willkommen in unserer Anwendung",
3  "beschreibung": "Eine mehrsprachige Next.js-Anwendung"
4}

Verwendung

TSXCopy
1// Server Component
2const { t } = await getTranslation(locale);
3return <h1>{t('titel')}</h1>;
4
5// Client Component
6const { t } = useTranslation(locale);
7return <p>{t('items', { count: 5 })}</p>;

Verwandte Artikel

• react-i18next vs react-intl Vergleich