next-intl 4
Dieses Skill behandelt next-intl 4.x, wie auf https://next-intl.dev/docs/getting-started dokumentiert (Dokumentation Stand 4.14.9). Es beleuchtet, was von der Gewohnheit abweicht: überraschende Voreinstellungen, Fallstricke, Legacy-APIs und die von der Dokumentation empfohlenen Muster. Jede Behauptung in den Referenzdateien endet mit der Quellseite.
Navigation
- Lesen Sie den Schnellstart und die Schnellregeln unten. Sie fangen die häufigsten Fehler ab.
- Öffnen Sie die eine Referenzdatei, die zur Aufgabe passt, aus der Tabelle am Ende.
- Wenn der Code
setRequestLocale,requestLocaleodermiddleware.tsverwendet, lesen Sie zuerst die Tabelle "Alte Muster".
Schnellstart (App Router)
Der App Router ist der empfohlene Weg. Der Pages Router wird weiterhin unterstützt, siehe references/setup.md. https://next-intl.dev/docs/getting-started/pages-router
// next.config.ts
import {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
const nextConfig: NextConfig = {};
const withNextIntl = createNextIntlPlugin();
export default withNextIntl(nextConfig);
https://next-intl.dev/docs/getting-started/app-router
Ohne sprachbasierte URLs löst src/i18n/request.ts die Sprache aus einer Benutzereinstellung, im einfachsten Fall einem Cookie:
// src/i18n/request.ts
import {cookies} from 'next/headers';
import {getRequestConfig} from 'next-intl/server';
export default getRequestConfig(async () => {
const store = await cookies();
const locale = store.get('locale')?.value || 'en';
return {
locale,
messages: (await import(`../../messages/${locale}.json`)).default
};
});
https://next-intl.dev/docs/getting-started/app-router
// src/app/layout.tsx
import {NextIntlClientProvider} from 'next-intl';
import {getLocale} from 'next-intl/server';
export default async function RootLayout({children}) {
const locale = await getLocale();
return (
<html lang={locale}>
<body>
<NextIntlClientProvider>{children}</NextIntlClientProvider>
</body>
</html>
);
}
https://next-intl.dev/docs/getting-started/app-router , https://next-intl.dev/docs/usage/configuration
import {useTranslations} from 'next-intl';
import {getTranslations} from 'next-intl/server';
export function HomePage() {
const t = useTranslations('HomePage'); // Nicht-Async-Komponente
return <h1>{t('title')}</h1>;
}
export async function Profile() {
const t = await getTranslations('ProfilePage'); // Async-Komponente
return <h1>{t('title')}</h1>;
}
https://next-intl.dev/docs/getting-started/app-router
Für URLs nach dem Schema /en/about fügen Sie src/i18n/routing.ts, src/proxy.ts, src/i18n/navigation.ts und ein [locale]-Segment auf oberster Ebene hinzu: references/routing.md. https://next-intl.dev/docs/routing/setup
Schnellregeln
Setup
- Das Plugin findet
i18n/request.tsinsrc/oder dem Projektstammverzeichnis (.ts,.tsx,.js,.jsx). An anderer Stelle übergeben Sie den Pfad:createNextIntlPlugin('./somewhere/else/request.ts'). https://next-intl.dev/docs/getting-started/app-router - Das Beispiel in der Dokumentation kodiert
const locale = 'en'fest. Ersetzen Sie es durch eine echte Auflösung (Cookie, Benutzereinstellung odernext/root-params). https://next-intl.dev/docs/getting-started/app-router getRequestConfigwird einmal pro Anfrage im Render-Durchlauf der Server-Komponenten ausgeführt, daher funktionierencookies()undheaders()dort. https://next-intl.dev/docs/usage/configuration- Setzen Sie
timeZoneim Request-Config. Der Standardwert ist die Zeitzone der Server-Laufzeitumgebung. https://next-intl.dev/docs/usage/configuration
Routing
- Benennen Sie die Datei auf Next.js 16 in
src/proxy.tsum. Der Import bleibtcreateMiddlewarevonnext-intl/middleware. https://next-intl.dev/docs/routing/setup - Lesen Sie die Sprache mit
await rootParams.locale()vonnext/root-params, validieren Sie sie mithasLocale(routing.locales, value), sonstnotFound(). Next.js vor 16.3 benötigtexperimental.rootParams. https://next-intl.dev/docs/routing/setup - Importieren Sie
Link,redirect,usePathname,useRouterundgetPathnameaus Ihreri18n/navigation.tsstatt ausnext/linkodernext/navigation. https://next-intl.dev/docs/routing/navigation - Wechseln Sie die Sprache mit
router.replace(pathname, {locale})aus diesem Modul.<Link locale>wird nicht vorab abgerufen, um das Überschreiben des Sprache-Cookies zu vermeiden. https://next-intl.dev/docs/routing/navigation redirectbenötigt immer eine Sprache:redirect({href: '/login', locale}). Schreiben Siereturn redirect(...), damit TypeScript die Typverengung vornimmt. https://next-intl.dev/docs/routing/navigation- Der Standard-Matcher überspringt Pfade mit einem Punkt. Fügen Sie einen expliziten Eintrag für Routen wie
/users/jane.doehinzu. https://next-intl.dev/docs/routing/middleware
Client-Komponenten
NextIntlClientProviderohnemessages-Prop sendet ALLE Nachrichten an den Client. Übergeben Siemessages={pick(messages, 'Namespace')}odermessages={null}, um sie zu begrenzen. https://next-intl.dev/docs/environments/server-client-components- Bevorzugen Sie die Übersetzung in einer Server-Komponente und übergeben Sie Labels als Props oder
childrenan die Client-Komponente. https://next-intl.dev/docs/environments/server-client-components onErrorundgetMessageFallbackkönnen nicht von einer Server-Komponente übergeben werden. Setzen Sie sie in Ihrem eigenen'use client'-Provider, der innerhalb des Server-Providers verschachtelt ist. Dieser erbt weiterhin Sprache und Nachrichten, also übergeben Sie diese nicht manuell. https://next-intl.dev/docs/usage/configuration
Nachrichten
- Schlüssel und Namespaces dürfen keinen
.enthalten, dieser bedeutet Verschachtelung. Verwenden Sie nur verschachteltes JSON. https://next-intl.dev/docs/usage/translations - ICU-Argumentnamen und
select-Werte erlauben Buchstaben, Ziffern und_, keine Bindestriche: mappen Sieen-GBaufen_GB.selectbenötigt einenother-Fall. https://next-intl.dev/docs/usage/translations - Selbstschließende Tags benötigen einen schließenden Tag in Nachrichten:
<br></br>. https://next-intl.dev/docs/usage/translations - Verwenden Sie
getTranslations({locale, namespace})in Server Actions, Metadaten und Route Handlers, wo die Sprache möglicherweise nicht abgeleitet werden kann. https://next-intl.dev/docs/environments/actions-metadata-route-handlers
Tests
- Vitest mit
createNavigation:server.deps.inline: ['next-intl']. Jest:transformIgnorePatterns: ['node_modules/(?!next-intl)/']. next-intl ist reines ESM. https://next-intl.dev/docs/environments/testing
Alte Muster
| Alt | Aktuell |
|---|---|
src/middleware.ts | src/proxy.ts auf Next.js 16, gleicher createMiddleware-Code |
setRequestLocale(locale) am Anfang jedes Layouts und jeder Seite | next/root-params in i18n/request.ts, statisches Rendering funktioniert ohne |
getRequestConfig(async ({requestLocale}) => ...) | getRequestConfig(async ({locale}) => ...) mit einem rootParams.locale()-Fallback |
Flache Nachrichtenschlüssel "HomePage.title" | Verschachtelte Objekte {"HomePage": {"title": ...}} |
t.raw HTML in dangerouslySetInnerHTML | t.rich (React) oder t.markup (Strings), t.raw nur zum Überspringen der Analyse, bereinigt |
Details: references/routing.md und references/messages.md.
Referenzdateien
| Datei | Lesen Sie sie für |
|---|---|
| references/setup.md | Plugin, Request-Config, Provider-Standardwerte, Sprache ohne Routing, Nachrichtenspeicher, Pages Router |
| references/routing.md | defineRouting, [locale]-Segment, proxy.ts, Matcher, next/root-params, statisches Rendering, localePrefix, Domains, Cookie, alternative Links, lokalisierte Pfadnamen, statischer Export, Fehlerbehebung |
| references/navigation.md | createNavigation, Link, useRouter, usePathname, redirect, getPathname, Sprachumschalter, typisierte href |
| references/messages.md | useTranslations, Namespaces, ICU-Plurale und Select, Rich Text, t.markup, t.raw, t.has, Arrays, fehlende Nachrichten, onError, Zeitzone, now |
| references/formatting.md | useFormatter: Daten, relative Zeit, Zeiträume, Zahlen, Listen, Anzeigenamen, ICU-Skelette, globale Formate |
| references/server-and-client.md | Server- vs. Client-Komponenten, Nachrichten auswählen, Metadaten, Server Actions, Zod, Route Handlers, Sitemap, OG-Bilder, 404- und Fehlerseiten |
| references/extraction.md | Experimentelles useExtracted und getExtracted, Plugin experimental-Optionen, PO-Dateien, Vorkompilierung, benutzerdefinierte Codecs, Monorepos |
| references/typescript-and-tooling.md | AppConfig-Erweiterung, typsichere Argumente, Testen mit Jest und Vitest, Storybook, use-intl-Kern, Laufzeitanforderungen, Linting, Übersetzungsmanagement, Agenten-Konventionen |
Durchsuchte Seiten: SOURCES.md.