next-intl: Der komplette Guide zu Next.js Internationalisierung (2026)

Schnelle Antwort

next-intl ist die beste Internationalisierungs (i18n) Bibliothek für Next.js 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. next-intl ist speziell für Next.js 13-15+ mit nativem Server Component Support, automatischem Routing und einer ~2KB Bundle-Größe designed.

---

Was ist next-intl?

next-intl ist eine leichtgewichtige Internationalisierungsbibliothek die speziell für Next.js gebaut wurde. Anders als allgemeine React i18n Bibliotheken wurde next-intl von Grund auf für den App Router und Server Components designed.

Warum next-intl statt anderer Bibliotheken?

Hauptvorteile:

• Null Client-seitiges JS für Server-gerenderte Übersetzungen - Übersetzungen bleiben auf dem Server
• Automatisches Locale-Routing - /en/about, /de/about automatisch gehandelt
• ICU Message Format - Ordentliche Pluralisierung, Geschlecht und Formatierung
• Type-safe - Voller TypeScript-Support mit Autocomplete

---

Installation & Setup

Schritt 1: next-intl installieren

TerminalCopy
npm install next-intl

Schritt 2: Projektstruktur

/your-nextjs-app
├── /app
│   └── /[locale]           # Dynamisches Locale-Segment
│       ├── layout.tsx      # Locale-aware Layout
│       ├── page.tsx        # Startseite
│       └── /about
│           └── page.tsx    # Über-Seite
├── /messages               # Übersetzungsdateien
│   ├── en.json
│   ├── de.json
│   └── es.json
├── middleware.ts           # Locale-Erkennung & Routing
└── next.config.js

Schritt 3: Locales konfigurieren

TypeScriptCopy
1// i18n/config.ts
2export const locales = ['en', 'de', 'es', 'fr', 'ja'] as const;
3export type Locale = (typeof locales)[number];
4export const defaultLocale: Locale = 'en';
5
6export const localeNames: Record<Locale, string> = {
7  en: 'English',
8  de: 'Deutsch',
9  es: 'Español',
10  fr: 'Français',
11  ja: '日本語',
12};

Schritt 4: Middleware erstellen

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

Schritt 5: Übersetzungsdateien erstellen

messages/de.json:

JSONCopy
1{
2  "common": {
3    "welcome": "Willkommen in unserer App",
4    "loading": "Lädt...",
5    "error": "Etwas ist schief gelaufen"
6  },
7  "home": {
8    "title": "Startseite",
9    "description": "Das ist die Startseite",
10    "cta": "Loslegen"
11  },
12  "navigation": {
13    "home": "Start",
14    "about": "Über uns",
15    "contact": "Kontakt"
16  }
17}

---

Übersetzungen verwenden

Server Components (Empfohlen)

In Server Components verwenden Sie getTranslations():

TypeScriptCopy
1import { getTranslations } from 'next-intl/server';
2
3export default async function HomePage() {
4  const t = await getTranslations('home');
5
6  return (
7    <main>
8      <h1>{t('title')}</h1>
9      <p>{t('description')}</p>
10      <button>{t('cta')}</button>
11    </main>
12  );
13}

Client Components

Für interaktive Komponenten verwenden Sie useTranslations():

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

---

Variablen und Interpolation

Grundlegende Variablen

JSONCopy
1{
2  "greeting": "Hallo, {name}!",
3  "items": "Sie haben {count} Artikel in Ihrem Warenkorb"
4}

TypeScriptCopy
t('greeting', { name: 'John' })  // "Hallo, John!"
t('items', { count: 5 })         // "Sie haben 5 Artikel in Ihrem Warenkorb"

Pluralisierung (ICU Format)

next-intl verwendet ICU Message Format für ordentliche Pluralisierung:

JSONCopy
{
  "cartItems": "{count, plural, =0 {Ihr Warenkorb ist leer} one {# Artikel im Warenkorb} other {# Artikel im Warenkorb}}"
}

---

Zahlen-, Datums- und Währungsformatierung

Zahlenformatierung

TypeScriptCopy
1import { useFormatter } from 'next-intl';
2
3function PriceDisplay({ price }: { price: number }) {
4  const format = useFormatter();
5
6  return (
7    <span>
8      {format.number(price, { style: 'currency', currency: 'EUR' })}
9    </span>
10  );
11}
12// de-DE: "1.234,56 €"

Datumsformatierung

TypeScriptCopy
1const format = useFormatter();
2
3format.dateTime(date, { dateStyle: 'full' })
4// de-DE: "Freitag, 17. Januar 2026"

---

Routing und Navigation

Locale-aware Links

TypeScriptCopy
1import Link from 'next-intl/link';
2
3function Navigation() {
4  return (
5    <nav>
6      <Link href="/">Start</Link>
7      <Link href="/about">Über uns</Link>
8    </nav>
9  );
10}
11// Rendert automatisch als /de/about basierend auf aktuellem Locale

Sprachumschalter

TypeScriptCopy
1'use client';
2
3import { useLocale } from 'next-intl';
4import { useRouter, usePathname } from 'next-intl/client';
5
6export function LanguageSwitcher() {
7  const locale = useLocale();
8  const router = useRouter();
9  const pathname = usePathname();
10
11  const handleChange = (newLocale: string) => {
12    router.replace(pathname, { locale: newLocale });
13  };
14
15  return (
16    <select value={locale} onChange={(e) => handleChange(e.target.value)}>
17      <option value="en">English</option>
18      <option value="de">Deutsch</option>
19      <option value="es">Español</option>
20    </select>
21  );
22}

---

TypeScript-Integration

Type-safe Übersetzungen

TypeScriptCopy
1// global.d.ts
2import de from './messages/de.json';
3
4type Messages = typeof de;
5
6declare global {
7  interface IntlMessages extends Messages {}
8}

Jetzt bekommen Sie Autocomplete und Type-Checking:

TypeScriptCopy
1const t = useTranslations('home');
2
3t('title')        // ✅ Gültig
4t('nonExistent')  // ❌ TypeScript Error

---

Übersetzungen skaliert verwalten

Wenn Ihre App wächst, wird manuelles JSON-Datei-Management problematisch. IntlPull bietet nahtlose next-intl Integration:

TerminalCopy
1# IntlPull in Ihrem Projekt initialisieren
2npx @intlpullhq/cli init
3
4# Existierende Übersetzungen hochladen
5npx @intlpullhq/cli upload
6
7# KI-Übersetzungen für neue Sprachen holen
8npx @intlpullhq/cli translate --languages de,es,fr,ja
9
10# Übersetzungen zurück in Ihr Projekt ziehen
11npx @intlpullhq/cli download

Vorteile:

• KI-gestützte Übersetzung mit GPT-4, Claude, DeepL
• Visueller Editor mit Screenshot-Kontext
• Team-Kollaboration mit Review-Workflows
• Automatischer Sync mit Ihrer Codebase

Starten Sie kostenlos mit IntlPull →