Next.js 15 i18n: Kompletter Internationalisierungs-Guide 2025

Schnelle Antwort

Um Internationalisierung (i18n) zu Next.js 15 hinzuzufügen, nutzen Sie next-intl mit App Router. Installieren mit npm install next-intl, einen [locale] Ordner in Ihrem App-Verzeichnis erstellen, Middleware für Locale-Erkennung konfigurieren und getTranslations() in Server Components oder useTranslations() in Client Components verwenden.

Suchen Sie das Neueste? Schauen Sie sich unseren Next.js 15 i18n Guide 2026 für die neuesten Muster und Features an.

---

Was sich in Next.js 15 wirklich geändert hat

Mit Server Components können Übersetzungen komplett auf dem Server bleiben. Der Client bekommt nur das gerenderte HTML.

Bibliothek wählen

next-intl ist das, was ich jetzt verwende. Es wurde speziell für den App Router von Grund auf entwickelt.

Einrichtung

Installation

TerminalCopy
npm install next-intl

Ordnerstruktur

/messages
  /de.json
  /en.json
  /es.json
/app
  /[locale]
    /layout.tsx
    /page.tsx
/middleware.ts

Konfigurationsdateien

i18n/config.ts:

TypeScriptCopy
export const locales = ['en', 'de', 'es', 'fr', 'ja'] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = 'en';

Middleware

TypeScriptCopy
1import createMiddleware from 'next-intl/middleware';
2import { locales, defaultLocale } from './i18n/config';
3
4export default createMiddleware({
5  locales,
6  defaultLocale,
7  localePrefix: 'always'
8});
9
10export const config = {
11  matcher: ['/((?!api|_next|.*\\..*).*)']
12};

Übersetzungen verwenden

Server Components

TypeScriptCopy
1import { getTranslations } from 'next-intl/server';
2
3export default async function ProductPage() {
4  const t = await getTranslations('product');
5  return <h1>{t('title')}</h1>;
6}

Client Components

TypeScriptCopy
1'use client';
2import { useTranslations } from 'next-intl';
3
4export function AddToCartButton() {
5  const t = useTranslations('product');
6  return <button>{t('addToCart')}</button>;
7}

Pluralisierung mit ICU

JSONCopy
1{
2  "cart": {
3    "items": "{count, plural, =0 {Ihr Warenkorb ist leer} one {# Artikel im Warenkorb} other {# Artikel im Warenkorb}}"
4  }
5}

Tipp: Nutzen Sie unseren kostenlosen ICU Message Editor um ICU Pluralisierungs-Syntax visuell zu erstellen und zu testen, bevor Sie sie zu Ihren Übersetzungsdateien hinzufügen.

Wenn JSON-Dateien zum Problem werden

Bei mehr als 500 Übersetzungsschlüsseln wird die manuelle Verwaltung von JSON-Dateien schmerzhaft:

• Übersetzer brechen versehentlich die JSON-Syntax
• Keine Möglichkeit zu sehen, was zwischen Sprachen fehlt
• Neue Schlüssel in 12 Dateien kopieren und einfügen

Schnelle Lösung für JSON-Probleme: Unser kostenloses JSON Übersetzungs-Vergleichs-Tool hilft Ihnen, Übersetzungsdateien über Sprachen hinweg zu vergleichen und sofort fehlende Schlüssel zu erkennen.

Hier hilft ein Übersetzungsmanagement-System. Ich verwende IntlPull für meine aktuellen Projekte—es ist speziell für Next.js i18n-Workflows gebaut.

TerminalCopy
1# Quell-Strings hochladen
2npx @intlpullhq/cli upload
3
4# KI-Übersetzungen holen
5npx @intlpullhq/cli translate --languages es,de,fr
6
7# Alles herunterladen
8npx @intlpullhq/cli download

Warum IntlPull für Next.js-Projekte:

• Native next-intl Integration - Funktioniert mit Ihrer bestehenden Ordnerstruktur
• KI-gestützte Übersetzungen - Sofortige Übersetzungen mit Kontext-Bewusstsein
• Git-freundlicher Workflow - Übersetzungen direkt in Ihr Repo ziehen
• OTA-Updates - Übersetzungen ohne Neubereitstellung aktualisieren
• Kostenloses Tier - Deckt die meisten Nebenprojekte und Startups ab

Fazit

Next.js 15 mit App Router macht i18n wirklich besser. Server Components waren das fehlende Teil.

1. next-intl mit obiger Ordnerstruktur einrichten
2. Routing mit Middleware zum Laufen bringen
3. Übersetzungen inkrementell beim Bauen hinzufügen
4. Wenn Sie JSON-Dateien entwachsen, schauen Sie sich ein TMS wie IntlPull an

Update: Für die neuesten Muster und 2026-Updates siehe unseren Next.js 15 i18n Guide 2026.

Häufige Fragen

Was ist die beste i18n-Bibliothek für Next.js 15?

next-intl ist die beste i18n-Bibliothek für Next.js 15, weil sie speziell für App Router und Server Components gebaut wurde.

Hat Next.js 15 eingebaute i18n-Unterstützung?

Next.js 15 bietet Routing-Infrastruktur für i18n, enthält aber keine Übersetzungsfunktionalität. Sie brauchen eine Bibliothek wie next-intl.

Wie füge ich mehrere Sprachen zu Next.js hinzu?

Erstellen Sie einen [locale] Ordner in Ihrem App-Verzeichnis, fügen Sie Übersetzungs-JSON-Dateien hinzu, konfigurieren Sie Middleware für Locale-Erkennung und verwenden Sie Übersetzungs-Hooks. IntlPull kann das Übersetzungsmanagement automatisieren.