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

Schnelle Antwort

Um react-intl mit Next.js Pages Router zu verwenden: Installieren Sie react-intl, erstellen Sie ICU-Nachrichtendateien und umwickeln Sie _app.tsx mit IntlProvider.

Installation

TerminalCopy
npm install react-intl

next.config.js:

JavaScriptCopy
1module.exports = {
2  i18n: {
3    locales: ['de', 'en', 'es'],
4    defaultLocale: 'de',
5  },
6};

Nachrichten

lang/de.json:

JSONCopy
1{
2  "app.titel": "Willkommen bei Meiner App",
3  "app.items": "{count, plural, =0 {Keine Artikel} one {# Artikel} other {# Artikel}}"
4}

_app.tsx Konfiguration

TSXCopy
1import { IntlProvider } from 'react-intl';
2import { useRouter } from 'next/router';
3
4export default function App({ Component, pageProps }) {
5  const { locale } = useRouter();
6  return (
7    <IntlProvider locale={locale} messages={pageProps.messages}>
8      <Component {...pageProps} />
9    </IntlProvider>
10  );
11}

Verwendung

TSXCopy
import { FormattedMessage } from 'react-intl';

<FormattedMessage id="app.titel" />

Verwandte Artikel

• react-i18next vs react-intl Vergleich