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

Schnelle Antwort

Um react-intl mit Next.js App Router zu verwenden: Installieren Sie react-intl, erstellen Sie Nachrichtendateien im ICU-Format und umwickeln Sie Ihre App mit IntlProvider.

Setup

TerminalCopy
npm install react-intl @formatjs/intl-localematcher

messages/de.json:

JSONCopy
1{
2  "home.titel": "Willkommen in unserer Anwendung",
3  "home.items": "{count, plural, =0 {Keine Artikel} one {# Artikel} other {# Artikel}}"
4}

IntlProvider

TSXCopy
1'use client';
2import { IntlProvider } from 'react-intl';
3
4export function IntlClientProvider({ locale, messages, children }) {
5  return (
6    <IntlProvider locale={locale} messages={messages}>
7      {children}
8    </IntlProvider>
9  );
10}

Verwendung

TSXCopy
1import { FormattedMessage, FormattedNumber } from 'react-intl';
2
3<FormattedMessage id="home.titel" />
4<FormattedNumber value={1234.56} style="currency" currency="EUR" />

Verwandte Artikel

• react-i18next vs react-intl Vergleich