Next.js + next-i18next: Der komplette Guide (Pages Router) [2026]

Einführung

Obwohl der App Router der neue Standard ist, verwenden viele Produktions-Next.js-Apps immer noch den Pages Router. Die De-facto-Lösung für die Internationalisierung in dieser Architektur ist next-i18next.

Dieser Guide deckt das empfohlene Setup für 2026 ab.

Installation

TerminalCopy
npm install next-i18next i18next react-i18next

Konfiguration

1. Erstelle eine next-i18next.config.js im Stammverzeichnis:

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

2. Importiere diese Config in next.config.js:

JavaScriptCopy
1const { i18n } = require('./next-i18next.config');
2
3module.exports = {
4  i18n,
5};

Verwendung (SSR/SSG)

Der Schlüsselpunkt bei next-i18next ist, dass du Übersetzungen auf Seitenebene über getStaticProps oder getServerSideProps laden musst.

JavaScriptCopy
1// pages/index.js
2import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
3import { useTranslation } from 'next-i18next';
4
5export async function getStaticProps({ locale }) {
6  return {
7    props: {
8      ...(await serverSideTranslations(locale, ['common', 'footer'])),
9    },
10  };
11}
12
13export default function Homepage() {
14  const { t } = useTranslation('common');
15  return <h1>{t('welcome')}</h1>;
16}

App Wrapper

Schließlich, wrappe deine App in pages/_app.js.

JavaScriptCopy
1import { appWithTranslation } from 'next-i18next';
2
3function MyApp({ Component, pageProps }) {
4  return <Component {...pageProps} />;
5}
6
7export default appWithTranslation(MyApp);

Dateistruktur

Standardmäßig erwartet next-i18next deine JSON-Dateien in public/locales/{lang}/{ns}.json.

public/
  locales/
    en/
      common.json
    de/
      common.json

Verwaltung mit IntlPull

Um diese JSON-Dateien ohne Kopfschmerzen zu synchronisieren:

TerminalCopy
npx @intlpullhq/cli pull --output public/locales

Dies lädt automatisch die neuesten Übersetzungen von deinem IntlPull-Projekt direkt in den öffentlichen Ordner von Next.js herunter.

Fazit

next-i18next bleibt eine solide und bewährte Lösung für Next.js-Projekte, die den Pages Router verwenden. Sie nutzt den nativen i18n-Support von Next.js für das Routing und gewährleistet exzellentes SEO und Performance.