Die Ära des App Router
Mit der massiven Übernahme des App Router in Next.js hat sich die Art und Weise, wie i18n gehandhabt wird, geändert. Klassische Bibliotheken, die auf React Context basieren, funktionieren nicht gut mit Server Components.
Hier kommt next-intl ins Spiel. Es ist derzeit die beste Lösung für i18n im App Router im Jahr 2026.
Installation
Terminalnpm install next-intl
Ordnerstruktur
Im App Router wird die Internationalisierung normalerweise über ein dynamisches Segment im Stammverzeichnis gehandhabt: app/[locale]/layout.tsx.
app/
[locale]/
layout.tsx
page.tsx
middleware.ts
i18n.ts
Middleware-Konfiguration
Erstelle eine middleware.ts, um Benutzer zu ihrer bevorzugten Sprache umzuleiten.
TypeScript1import createMiddleware from 'next-intl/middleware'; 2 3export default createMiddleware({ 4 locales: ['en', 'de', 'fr'], 5 defaultLocale: 'en' 6}); 7 8export const config = { 9 matcher: ['/((?!api|_next|.*\\..*).*)'] 10};
i18n-Plugin-Konfiguration
Erstelle eine Datei i18n.ts (oder src/i18n.ts) :
TypeScript1import {getRequestConfig} from 'next-intl/server'; 2 3export default getRequestConfig(async ({locale}) => ({ 4 messages: (await import(`./messages/${locale}.json`)).default 5}));
Verwendung in Server Components
Der Hauptvorteil von next-intl ist, dass es asynchron in Server Components funktioniert.
TSX1import {useTranslations} from 'next-intl'; 2 3export default function HomePage() { 4 const t = useTranslations('Index'); 5 return <h1>{t('title')}</h1>; 6}
Moment... useTranslations sieht wie ein Hook aus? Ja, aber in einer Server Component handhabt next-intl dies intelligent, ohne einen globalen Context Provider zu benötigen, der das Server-Rendering unterbrechen würde.
Verwendung in Client Components
Für Client Components ('use client') musst du deine App (oder einen Teil) in NextIntlClientProvider wrappen.
TSX1// app/[locale]/layout.tsx 2import {NextIntlClientProvider, useMessages} from 'next-intl'; 3 4export default function LocaleLayout({children, params: {locale}}) { 5 const messages = useMessages(); 6 7 return ( 8 <html lang={locale}> 9 <body> 10 <NextIntlClientProvider locale={locale} messages={messages}> 11 {children} 12 </NextIntlClientProvider> 13 </body> 14 </html> 15 ); 16}
Verwaltung von Übersetzungen
Wie bei anderen Frameworks, speichere deine Übersetzungen in JSON-Dateien. Um die Verwaltung zu automatisieren, verwende IntlPull.
Terminal# Pushe die neuen JSON-Dateien npx @intlpullhq/cli push messages/en.json
Fazit
next-intl bietet die flüssigste Erfahrung für die Lokalisierung moderner Next.js-Anwendungen. Es respektiert die Server Components Architektur und bietet gleichzeitig eine einfache und vertraute API.
