CommunityCodierung & Entwicklunggithub.com

next-intl-docs

Vermittelt aktuelle next-intl 4 Praktiken zur Internationalisierung von Next.js-Apps, basierend auf der offiziellen Dokumentation. Verwenden Sie dies beim Einrichten von next-intl mit dem App Router, Schreiben von i18n/request.ts, Hinzufügen eines [locale]-Segments mit defineRouting, Erstellen von Middleware in proxy.ts (ehemals middleware.ts), Erstellen von Sprachumschaltern mit createNavigation, Übersetzen mit useTranslations oder getTranslations, Übergeben von Nachrichten an NextIntlClientProvider, Schreiben von ICU-Nachrichten (Plurale, Select, Rich Text), Formatieren von Daten, Zahlen und Listen mit useFormatter, Übersetzen von Metadaten, Server Actions, Route Handlers, lokalisierten 404- und Fehlerseiten, statischem Rendering mit next/root-params, typsicheren Nachrichten durch AppConfig, Testen mit Jest, Vitest, Storybook oder Extrahieren von Inline-Nachrichten mit useExtracted. Wird ausgelöst bei next-intl, useTranslations, getTranslations, NextIntlClientProvider, getRequestConfig, i18n Routing, locale prefix, localePrefix, NEXT_LOCALE, hreflang, setRequestLocale, ICU-Nachrichten, App Router Internationalisierung.

Was ist next-intl-docs?

Dieses Skill (next-intl-docs) fasst die Best Practices und kritischen Konfigurationsdetails von next-intl 4.x für die Internationalisierung von Next.js-Anwendungen zusammen. Es basiert auf der offiziellen Dokumentation (Stand 4.14.9) und legt den Fokus auf den App Router, obwohl der Pages Router weiterhin unterstützt wird. Der Skill behandelt die Einrichtung des Plugins (createNextIntlPlugin), die Konfiguration des Request-Configs (i18n/request.ts), das Routing (defineRouting, proxy.ts, createNavigation), die Verwendung von Übersetzungsfunktionen (useTranslations, getTranslations) und die Formatierung von Daten, Zahlen und Listen (useFormatter). Besondere Aufmerksamkeit gilt typischen Fallstricken wie der korrekten Handhabung von Client-Komponenten (NextIntlClientProvider, Message-Begrenzung) und ICU-Nachrichten (Plurale, Select, Rich Text). Es bietet zudem eine Übersicht über alte und neue Muster (z.B. middleware.ts vs. proxy.ts, setRequestLocale vs. next/root-params) und verweist auf detaillierte Referenzdateien für Setup, Routing, Navigation, Nachrichten, Formatierung, Server/Client-Komponenten, Extraktion und TypeScript/Tooling. Dieses Skill ist für Entwickler gedacht, die next-intl in Next.js-Projekten produktiv und fehlerfrei einsetzen möchten, und unterstützt neben gängigen Test-Frameworks (Jest, Vitest, Storybook) auch die Extraktion von Inline-Nachrichten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofNext.js
npx skills add https://github.com/quentin-autret/claude-skills/tree/main/skills/next-intl-docs

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

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

  1. Lesen Sie den Schnellstart und die Schnellregeln unten. Sie fangen die häufigsten Fehler ab.
  2. Öffnen Sie die eine Referenzdatei, die zur Aufgabe passt, aus der Tabelle am Ende.
  3. Wenn der Code setRequestLocale, requestLocale oder middleware.ts verwendet, 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

Routing

Client-Komponenten

Nachrichten

Tests

Alte Muster

AltAktuell
src/middleware.tssrc/proxy.ts auf Next.js 16, gleicher createMiddleware-Code
setRequestLocale(locale) am Anfang jedes Layouts und jeder Seitenext/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 dangerouslySetInnerHTMLt.rich (React) oder t.markup (Strings), t.raw nur zum Überspringen der Analyse, bereinigt

Details: references/routing.md und references/messages.md.

Referenzdateien

DateiLesen Sie sie für
references/setup.mdPlugin, Request-Config, Provider-Standardwerte, Sprache ohne Routing, Nachrichtenspeicher, Pages Router
references/routing.mddefineRouting, [locale]-Segment, proxy.ts, Matcher, next/root-params, statisches Rendering, localePrefix, Domains, Cookie, alternative Links, lokalisierte Pfadnamen, statischer Export, Fehlerbehebung
references/navigation.mdcreateNavigation, Link, useRouter, usePathname, redirect, getPathname, Sprachumschalter, typisierte href
references/messages.mduseTranslations, Namespaces, ICU-Plurale und Select, Rich Text, t.markup, t.raw, t.has, Arrays, fehlende Nachrichten, onError, Zeitzone, now
references/formatting.mduseFormatter: Daten, relative Zeit, Zeiträume, Zahlen, Listen, Anzeigenamen, ICU-Skelette, globale Formate
references/server-and-client.mdServer- vs. Client-Komponenten, Nachrichten auswählen, Metadaten, Server Actions, Zod, Route Handlers, Sitemap, OG-Bilder, 404- und Fehlerseiten
references/extraction.mdExperimentelles useExtracted und getExtracted, Plugin experimental-Optionen, PO-Dateien, Vorkompilierung, benutzerdefinierte Codecs, Monorepos
references/typescript-and-tooling.mdAppConfig-Erweiterung, typsichere Argumente, Testen mit Jest und Vitest, Storybook, use-intl-Kern, Laufzeitanforderungen, Linting, Übersetzungsmanagement, Agenten-Konventionen

Durchsuchte Seiten: SOURCES.md.

Individual skills in this repo

This repo contains 16 individual skills — each has its own dedicated page.

eslint-docs

Teaches current ESLint 10 practices drawn from the official documentation. Use when writing, reviewing or fixing an eslint.config.js (flat config, defineConfig, files, ignores, globalIgnores, extends, languageOptions, globals, parsers, processors), configuring ESLint rules and severities, disable comments and inline config, running the CLI in CI (--fix, --cache, --quiet, --max-warnings, bulk suppressions, formatters, feature flags, MCP server), writing custom rules (meta, schema, fixes, suggestions, selectors, scope, code paths) and testing them with RuleTester, building plugins, shareable configs, custom parsers, processors or formatters, using the Node.js API (ESLint, Linter), or migrating to ESLint 9 or 10 from eslintrc. Triggers on eslint, eslint.config.js, flat config, .eslintrc, .eslintignore, @eslint/js, js/recommended, eslint-disable, no-unused-vars, no-restricted-imports, no-restricted-syntax, RuleTester, eslint-plugin, eslint-config, FlatCompat, context.getScope is not a function, ESLint 10.

grafana-cloud-docs

Grafana Cloud pitfalls, defaults, limits and current patterns from the Grafana, Mimir, Loki and Tempo docs, each tied to its docs URL. Use when sending OpenTelemetry data to Grafana Cloud, writing PromQL, LogQL or TraceQL, controlling cardinality and cost, designing alert rules, routing notifications, provisioning alerting, building Synthetic Monitoring checks, using the /apis dashboard API, choosing access policy tokens or service accounts, or migrating off API keys, the Loki Exporter and legacy /api routes.

javascript-docs

Teaches current JavaScript (ECMAScript) practice drawn from the MDN JavaScript documentation. Use when writing, reviewing or fixing modern JavaScript, choosing a built-in API, or replacing a deprecated pattern. Covers equality and coercion, let/const and the temporal dead zone, strict mode, ASI, functions, classes and private fields, objects, prototypes, Proxy, Reflect, Symbol, eval, operators (??, ?., spread, BigInt arithmetic), statements, Promise, async/await, Promise.try, iterators and iterator helpers, generators, using/await using, DisposableStack, WeakRef, Array (toSorted, at, groupBy, fromAsync), Map, Set methods, WeakMap, strings and Unicode, encodeURIComponent, RegExp (v flag, RegExp.escape, lastIndex), Number, Math, BigInt, JSON (rawJSON, revivers), typed arrays, ArrayBuffer, base64, SharedArrayBuffer, Atomics, Temporal, Date, Intl (DateTimeFormat, NumberFormat, Collator, Segmenter, PluralRules), errors (cause, Error.isError), ES modules, import attributes, import.meta, dynamic import.

nodejs-docs

Teaches Node.js practice drawn from the official Node.js API documentation, with pitfalls, surprising defaults, deprecations and replacements, each backed by its nodejs.org URL. Use when writing, reviewing, debugging or upgrading Node.js code, or choosing a built-in module (fs, crypto, streams, http, process, CLI flags, node:test, ESM/CommonJS, package.json exports, TypeScript type stripping, child_process, worker_threads, node:sqlite, deprecations).

playwright-docs

Pitfalls, surprising defaults and recommended patterns of Playwright Test for JavaScript and TypeScript, distilled from the official docs. Use when writing, reviewing, debugging or configuring Playwright tests (@playwright/test, playwright.config.ts, npx playwright test), including flaky tests, locators (getByRole, filter, strict mode), web-first assertions (expect, toHaveText, toBeVisible, expect.poll, toPass), fixtures, storageState authentication, project dependencies, timeouts, retries, network mocking (page.route, routeFromHAR, routeWebSocket), API testing, clock, aria snapshots, toHaveScreenshot, axe accessibility scans, traces, UI mode, reporters, CI, Docker, sharding, test locks, component testing with stories and mount, codegen, Playwright MCP, playwright-cli and migration from Puppeteer, Protractor, Testing Library or older Playwright versions.

postgresql-docs

Pitfalls, surprising defaults, PostgreSQL 18 changes and recommended patterns from the official PostgreSQL 18 documentation, each backed by its postgresql.org URL. Use when writing or reviewing PostgreSQL SQL, schema design, migrations and ALTER TABLE locks, indexes, transactions, isolation levels and retries, locking, upsert and MERGE, COPY, JSONB, timestamptz, generated and identity columns, partitioning, EXPLAIN, vacuum, roles, row-level security, PL/pgSQL, full-text search, connection settings, and upgrades to PostgreSQL 18.

react-docs

Writes, reviews and upgrades React 19.3 code from the official react.dev documentation. Use when writing components and Hooks, removing unnecessary useEffect calls, fixing Effect dependencies with useEffectEvent, building forms with Actions (useActionState, useOptimistic, useFormStatus, form action), using Server Components, 'use client', 'use server' and Server Functions, Suspense, use(), useTransition, useDeferredValue, ViewTransition, Activity, adopting React Compiler and eslint-plugin-react-hooks, deciding on useMemo, useCallback and memo, server rendering and hydration (createRoot, hydrateRoot, renderToPipeableStream, prerender), or migrating from React 18 (forwardRef, Context.Provider, ReactDOM.render, propTypes, defaultProps). Triggers on React, JSX, hooks, useState, useEffect, useRef, useContext, Server Components, RSC, Actions, React Compiler, Strict Mode, hydration mismatch, React 19 upgrade.

rust-std-docs

Gives current guidance from the official Rust standard library docs (std 1.99.1 stable) on pitfalls, panics, platform differences, discouraged APIs and newer stable replacements. Use when writing, reviewing or refactoring Rust code that uses std, especially collections (Vec, HashMap, BTreeMap, BinaryHeap, entry, extract_if, sort), Option/Result/error handling (expect, ?, Error, ExitCode, panic), iterators (collect, flatten, Peekable, try_fold), Box/Rc/RefCell/Cow/Pin/mem::take, Arc/Mutex/RwLock/OnceLock/LazyLock/thread::scope/mpsc/Condvar/atomics, String/str/fmt/format!/OsString/CString, io/fs/path (BufWriter, OpenOptions, PathBuf::join), process/env/net/time (Command, set_var, TcpStream, Instant, Duration), From/TryFrom/AsRef/Ord/Drop/Deref/Clone, and unsafe raw pointers, MaybeUninit, transmute, NonNull or integer overflow and float ordering.

socketio-docs

Builds, configures and debugs Socket.IO 4.8 servers and clients from the official Socket.IO v4 documentation. Use when writing a Node.js Socket.IO server (Express, Fastify, Koa, Bun, uWebSockets.js) or a socket.io-client app, emitting events with acknowledgements, timeout() and emitWithAck, broadcasting to rooms and namespaces, authenticating in middleware with the auth option, configuring CORS, reverse proxies and sticky sessions, scaling with the Redis, Redis Streams, Postgres, MongoDB or Cluster adapter, enabling connection state recovery and delivery guarantees, tuning reconnection, writing tests, troubleshooting connection issues, or migrating from Socket.IO v2 or v3. Triggers on Socket.IO, socket.io, socket.io-client, io(), new Server, emit, emitWithAck, acknowledgements, rooms, namespaces, broadcast, io.use, middleware, CORS, Redis adapter, sticky sessions, connection state recovery, reconnection, connect_error, Session ID unknown. Not for plain WebSocket servers such as ws without Socket.IO.

tailwindcss-docs

Teaches current Tailwind CSS v4 practices drawn from the official documentation. Use for any task that touches Tailwind CSS v4, even a small one, because many v3 habits silently break in v4. Use when writing or reviewing Tailwind CSS v4 code (utility classes, variants, arbitrary values, theme variables in @theme, @utility, @custom-variant, @apply, @reference, @source), setting up Tailwind in a framework or build tool (Vite plugin, PostCSS plugin, CLI, Next.js, SvelteKit, Nuxt, Angular, Laravel, Rails), customizing the theme (colors, fonts, breakpoints, spacing, animations), building dark mode with a class or data attribute, or migrating a project from Tailwind v3 (tailwind.config.js, @tailwind directives, darkMode class, safelist, bg-opacity, renamed shadow and outline utilities). Triggers on tailwindcss, @import "tailwindcss", @tailwindcss/vite, @tailwindcss/postcss, @tailwindcss/cli, @theme, @custom-variant dark, npx @tailwindcss/upgrade, upgrade to Tailwind v4.

tauri-docs

Tauri 2 apps, tauri.conf.json, capabilities and permissions, commands and invoke, events and channels, plugins, bundling, signing and the updater, migration from Tauri 1. Guides Tauri 2 work from the official v2 documentation, including scopes, managed state, plugin authoring, CSP and the isolation pattern, testing and debugging, Linux, Windows and macOS packages, and mobile and store releases. Use when writing or reviewing a Tauri 2 app, adding a plugin or a capability, fixing a "not allowed" or "forbidden path" error, wiring IPC between Rust and the webview, packaging, signing or publishing a desktop or mobile build, or upgrading a Tauri 1 or 2.0 beta project.

tokio-docs

Gives current guidance from the official tokio documentation (tokio 1.54.1) on async Rust pitfalls, cancel safety, blocking code, surprising defaults and deprecated APIs. Use when writing, reviewing or debugging async Rust code that uses tokio, especially the runtime (#[tokio::main], #[tokio::test], Builder, enable_all, block_on, current_thread, LocalRuntime, shutdown, feature flags), tasks (spawn, JoinHandle, JoinSet, abort, spawn_blocking, block_in_place, LocalSet, spawn_local, task_local), select!, join!, try_join!, cancellation and graceful shutdown, sync primitives (Mutex across .await, RwLock, Semaphore, Notify, OnceCell), channels (mpsc backpressure, oneshot, broadcast lag, watch), time (sleep, interval, MissedTickBehavior, timeout, paused time, start_paused), I/O and networking (AsyncReadExt, BufWriter flush, split, io::copy, framing, TcpListener, TcpStream, UdpSocket), tokio::fs, process (Command, kill_on_drop, Child), signals (ctrl_c, Windows console events) and Windows named pipes.

typescript-docs

Configures, writes and upgrades TypeScript 6.0 code and tsconfig.json from the official TypeScript documentation. Use when upgrading from TypeScript 5.x to 6.0 (strict, types, rootDir, baseUrl, moduleResolution node, target es5, outFile, esModuleInterop), choosing module and moduleResolution, writing package.json exports and imports, fixing ESM and CommonJS interop, enabling verbatimModuleSyntax or erasableSyntaxOnly, setting up project references and tsc --build, writing .d.ts files, checking JavaScript with JSDoc, or debugging narrowing, generics, mapped types, decorators and enums. Triggers on TypeScript, tsc, tsconfig, TS5112, ignoreDeprecations, nodenext, bundler, .d.ts, @ts-check, TypeScript 6 upgrade.

typesense-docs

Pitfalls, surprising defaults and recommended patterns of the Typesense search engine, distilled from the official docs. Use when designing a Typesense collection schema, writing search parameters (q, query_by, filter_by, sort_by, facet_by, group_by), tuning typo tolerance and ranking, building vector, semantic or hybrid search, conversational RAG or natural language search, creating API keys and scoped search keys for multi-tenancy, indexing and import (JSONL, upsert, emplace, dirty_values), syncing from a primary database, reindexing through aliases, managing synonyms (synonym sets), curation sets and stopwords, joins, analytics rules and query suggestions, InstantSearch, migrating from Algolia, or running, clustering, backing up and upgrading a Typesense server.

vite-docs

Teaches current Vite 8 practices drawn from the official documentation. Use when writing or fixing a vite.config, migrating from Vite 7 (Rolldown and Oxc replacing Rollup and esbuild), configuring the dev server, proxy or HMR, handling import.meta.env and modes, tuning the production build, library mode, SSR, writing a Vite plugin, using the HMR or JavaScript API, or the Environment API. Triggers on vite.config, defineConfig, rolldownOptions, import.meta.env, loadEnv, optimizeDeps, ssrLoadModule, ModuleRunner, this.environment, upgrade to Vite 8.

vitest-docs

Teaches current Vitest 5 practices drawn from the official documentation. Use when writing, reviewing or fixing Vitest tests (test, describe, expect, test.for, fixtures with test.extend, hooks, snapshots), mocking with vi (vi.fn, vi.spyOn, vi.mock, vi.when, fake timers, stubGlobal, stubEnv), configuring vitest.config or projects, choosing an environment or pool, filtering and running tests in CI, measuring coverage with v8 or istanbul, debugging slow or flaky suites, testing components in browser mode with Playwright, or migrating from Jest, Mocha or Vitest 4. Triggers on vitest, vi.mock, vi.fn, vitest.config, toMatchSnapshot, expect.poll, coverage thresholds, browser mode, @vitest/browser-playwright, jsdom, happy-dom, migrate Jest to Vitest, upgrade Vitest 5.

Verwandte Skills