Next.js i18n Tutorial 2026: App Router Internationalisierungs-Guide

Einführung

Next.js 14+ mit dem App Router bringt leistungsstarke neue Fähigkeiten für Internationalisierung. Dieser Guide zeigt Ihnen wie Sie eine vollständig internationalisierte Next.js-Anwendung mit korrektem Routing, SEO und Übersetzungsmanagement einrichten.

Schritt 1: next-intl installieren

Terminal
npm install next-intl

Schritt 2: Projektstruktur

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

Schritt 3: Middleware erstellen

TypeScript
1import createMiddleware from 'next-intl/middleware';
2
3export default createMiddleware({
4  locales: ['de', 'en', 'es', 'fr'],
5  defaultLocale: 'de',
6  localePrefix: 'as-needed'
7});
8
9export const config = {
10  matcher: ['/', '/(de|en|es|fr)/:path*']
11};

Schritt 4: Layout mit Locale erstellen

TSX
1import { NextIntlClientProvider } from 'next-intl';
2import { getMessages } from 'next-intl/server';
3
4export default async function LocaleLayout({
5  children,
6  params: { locale }
7}) {
8  const messages = await getMessages();
9
10  return (
11    <html lang={locale}>
12      <body>
13        <NextIntlClientProvider messages={messages}>
14          {children}
15        </NextIntlClientProvider>
16      </body>
17    </html>
18  );
19}

Schritt 5: Übersetzungsdateien erstellen

messages/de.json:

JSON
1{
2  "home": {
3    "title": "Willkommen in unserer App",
4    "description": "Die beste Lösung für Ihre Bedürfnisse",
5    "cta": "Jetzt starten"
6  },
7  "navigation": {
8    "home": "Startseite",
9    "about": "Über uns",
10    "contact": "Kontakt"
11  }
12}

Schritt 6: Übersetzungen in Seiten verwenden

Server Components

TSX
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

TSX
1'use client';
2
3import { useTranslations } from 'next-intl';
4
5export function LanguageSwitcher() {
6  const t = useTranslations('navigation');
7  // ... Sprachumschaltungs-Logik
8}

Schritt 7: Sprachumschalter hinzufügen

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

Schritt 8: SEO-Optimierung

Metadata mit Übersetzungen

TSX
1import { getTranslations } from 'next-intl/server';
2
3export async function generateMetadata({ params: { locale } }) {
4  const t = await getTranslations({ locale, namespace: 'home' });
5
6  return {
7    title: t('meta.title'),
8    description: t('meta.description'),
9    alternates: {
10      languages: {
11        'de': 'https://example.com/de',
12        'en': 'https://example.com/en',
13      },
14    },
15  };
16}

Pluralisierung und Formatierung

JSON
1{
2  "cart": {
3    "items": "{count, plural, =0 {Keine Artikel} =1 {1 Artikel} other {# Artikel}}"
4  }
5}

TSX
t('cart.items', { count: 5 }) // "5 Artikel"

Übersetzungen skaliert verwalten

Manuelle JSON-Verwaltung wird schnell schmerzhaft. So hilft IntlPull:

Terminal
1# Bidirektionaler Sync
2npx @intlpullhq/cli sync --watch
3
4# Neueste von IntlPull holen
5npx @intlpullhq/cli download --output ./messages
6
7# Neue Strings pushen
8npx @intlpullhq/cli upload --source ./messages/de.json

Fazit

Next.js mit next-intl bietet einen leistungsstarken, type-sicheren Weg um internationalisierte Anwendungen zu bauen. Kombiniert mit einem TMS wie IntlPull können Sie lokalisierte Features schneller als je zuvor shippen.

Bereit Ihr Next.js i18n zu vereinfachen? IntlPull kostenlos testen

Next.js Internationalisierung: Kompletter Setup-Guide mit App Router (2026)