Next.js Pages Router mit next-i18next: Vollständiges i18n-Tutorial 2026

Schnelle Antwort

Um next-i18next zu verwenden: Installieren Sie das Paket, erstellen Sie next-i18next.config.js, umwickeln Sie _app.tsx mit appWithTranslation und verwenden Sie serverSideTranslations.

Installation

TerminalCopy
npm install next-i18next react-i18next i18next

Konfiguration

next-i18next.config.js:

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

Übersetzungen

public/locales/de/common.json:

JSONCopy
1{
2  "begruessung": "Hallo, {{name}}!",
3  "items_one": "{{count}} Artikel",
4  "items_other": "{{count}} Artikel"
5}

Verwendung

TSXCopy
1import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
2import { useTranslation } from 'next-i18next';
3
4export default function Startseite() {
5  const { t } = useTranslation('common');
6  return <h1>{t('begruessung', { name: 'Welt' })}</h1>;
7}
8
9export const getStaticProps = async ({ locale }) => ({
10  props: {
11    ...(await serverSideTranslations(locale, ['common'])),
12  },
13});

Verwandte Artikel

• react-i18next vs react-intl Vergleich