feat: playground

examples/example-app-router-patterns/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/.next/
+.DS_Store
+tsconfig.tsbuildinfo

examples/example-app-router-patterns/README.md

@@ -0,0 +1,9 @@
+# example-app-router-patterns
+
+This example demonstrates various use cases and patterns for using `next-intl` with the App Router.
+
+## Deploy your own
+
+By deploying to [Vercel](https://vercel.com), you can check out the example in action. Note that you'll be prompted to create a new GitHub repository as part of this, allowing you to make subsequent changes.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/amannn/next-intl/tree/main/examples/example-app-router-patterns)

examples/example-app-router-patterns/eslint.config.mjs

@@ -0,0 +1,22 @@
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+import {FlatCompat} from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname
+});
+
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off'
+    }
+  }
+];
+
+export default eslintConfig;

examples/example-app-router-patterns/messages/de.po

@@ -0,0 +1,136 @@
+msgid ""
+msgstr ""
+"Language: de\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: next-intl\n"
+"X-Crowdin-SourceKey: msgstr\n"
+
+#: src/app/[locale]/page.tsx
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+#: src/components/PlaygroundSidebar.tsx
+msgid "aFyu8N"
+msgstr "Übersetzungen"
+
+#: src/app/[locale]/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+#: src/components/PlaygroundSidebar.tsx
+msgid "Jm_gm4"
+msgstr "Server-Komponenten"
+
+#: src/app/[locale]/page.tsx
+msgid "kka9Id"
+msgstr "Übersetzte Strings in Server-Komponenten lesen."
+
+#: src/app/[locale]/page.tsx
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/components/PlaygroundSidebar.tsx
+msgid "qwpdfx"
+msgstr "Client-Komponenten"
+
+#: src/app/[locale]/page.tsx
+msgid "5oEQPR"
+msgstr "Übersetzungen in interaktiven Client-Komponenten nutzen."
+
+#: src/app/[locale]/page.tsx
+msgid "k2qvag"
+msgstr "next-intl Playground"
+
+#: src/app/[locale]/page.tsx
+msgid "zllk1P"
+msgstr "Übersetzungen, Formatierung, Routing und Patterns mit Next.js."
+
+#: src/app/[locale]/page.tsx
+msgid "CxfKLC"
+msgstr "Seiten"
+
+#: src/app/[locale]/translations/client-components/ClientExample.tsx
+msgid "vlKhIl"
+msgstr "Dein Name"
+
+#: src/app/[locale]/translations/client-components/ClientExample.tsx
+msgid "nCfqYd"
+msgstr "Frodo"
+
+#: src/app/[locale]/translations/client-components/ClientExample.tsx
+msgid "tBFOH1"
+msgstr "Hallo, {name}!"
+
+#: src/app/[locale]/translations/client-components/page.tsx
+msgid "3L0BvJ"
+msgstr "useTranslations kann in Client-Komponenten aufgerufen werden, um clientseitigen State einzubeziehen."
+
+#: src/app/[locale]/translations/client-components/page.tsx
+msgid "3mdXe-"
+msgstr "ICU-Argumente wie '{name}' werden im Browser aufgelöst, wenn sich der State ändert."
+
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "h2vipu"
+msgstr "Code"
+
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "fio5op"
+msgstr "Ausgabe"
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "n5Juxa"
+msgstr "Nachrichten bleiben auf dem Server, es wird also keine Übersetzungs-Runtime an den Client ausgeliefert."
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "fZd-wY"
+msgstr "Async-Komponenten"
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "4-bDMC"
+msgstr "In async Server-Komponenten getTranslations awaiten, um Nachrichten zu lesen."
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "xh8Irc"
+msgstr "Nicht-async-Komponenten"
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "OLpN6c"
+msgstr "In nicht-async Server-Komponenten useTranslations direkt aufrufen — kein await nötig."
+
+#: src/app/[locale]/translations/server-components/ServerExample.tsx
+msgid "wVJ82J"
+msgstr "Hallo, Welt!"
+
+#: src/components/GitHubLink.tsx
+msgid "80g19N"
+msgstr "Auf GitHub ansehen"
+
+#: src/components/LocaleSwitcher.tsx
+msgid "dISpGP"
+msgstr "Sprache wechseln"
+
+#: src/components/PlaygroundByline.tsx
+msgid "GAUX9p"
+msgstr "Quellcode"
+
+#: src/components/PlaygroundByline.tsx
+msgid "_6_sPX"
+msgstr "Dokumentation"
+
+#: src/components/PlaygroundSidebar.tsx
+msgid "XqRXu6"
+msgstr "Playground"
+
+#: src/components/PlaygroundSidebar.tsx
+msgid "SRsuWF"
+msgstr "Navigation schließen"
+
+#: src/components/PlaygroundSidebar.tsx
+msgid "oM3yjO"
+msgstr "Navigation öffnen"
+
+#: src/components/ThemeToggle.tsx
+msgid "dLFYnK"
+msgstr "Zum hellen Design wechseln"
+
+#: src/components/ThemeToggle.tsx
+msgid "sDxHcF"
+msgstr "Zum dunklen Design wechseln"

examples/example-app-router-patterns/messages/en.po

@@ -0,0 +1,136 @@
+msgid ""
+msgstr ""
+"Language: en\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: next-intl\n"
+"X-Crowdin-SourceKey: msgstr\n"
+
+#: src/app/[locale]/page.tsx
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+#: src/components/PlaygroundSidebar.tsx
+msgid "aFyu8N"
+msgstr "Translations"
+
+#: src/app/[locale]/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+#: src/components/PlaygroundSidebar.tsx
+msgid "Jm_gm4"
+msgstr "Server Components"
+
+#: src/app/[locale]/page.tsx
+msgid "kka9Id"
+msgstr "Read translated strings inside Server Components."
+
+#: src/app/[locale]/page.tsx
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/components/PlaygroundSidebar.tsx
+msgid "qwpdfx"
+msgstr "Client Components"
+
+#: src/app/[locale]/page.tsx
+msgid "5oEQPR"
+msgstr "Use translations in interactive Client Components."
+
+#: src/app/[locale]/page.tsx
+msgid "k2qvag"
+msgstr "next-intl playground"
+
+#: src/app/[locale]/page.tsx
+msgid "zllk1P"
+msgstr "Translations, formatting, routing and patterns with Next.js."
+
+#: src/app/[locale]/page.tsx
+msgid "CxfKLC"
+msgstr "Pages"
+
+#: src/app/[locale]/translations/client-components/ClientExample.tsx
+msgid "vlKhIl"
+msgstr "Your name"
+
+#: src/app/[locale]/translations/client-components/ClientExample.tsx
+msgid "nCfqYd"
+msgstr "Frodo"
+
+#: src/app/[locale]/translations/client-components/ClientExample.tsx
+msgid "tBFOH1"
+msgstr "Hello, {name}!"
+
+#: src/app/[locale]/translations/client-components/page.tsx
+msgid "3L0BvJ"
+msgstr "useTranslations can be called in Client Components to incorporate client-side state."
+
+#: src/app/[locale]/translations/client-components/page.tsx
+msgid "3mdXe-"
+msgstr "ICU arguments like '{name}' are resolved in the browser as state changes."
+
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "h2vipu"
+msgstr "Code"
+
+#: src/app/[locale]/translations/client-components/page.tsx
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "fio5op"
+msgstr "Output"
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "n5Juxa"
+msgstr "Messages stay on the server, so no translation runtime is shipped to the client."
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "fZd-wY"
+msgstr "Async components"
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "4-bDMC"
+msgstr "In async Server Components, await getTranslations to read messages."
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "xh8Irc"
+msgstr "Non-async components"
+
+#: src/app/[locale]/translations/server-components/page.tsx
+msgid "OLpN6c"
+msgstr "In non-async Server Components, call useTranslations directly — no await needed."
+
+#: src/app/[locale]/translations/server-components/ServerExample.tsx
+msgid "wVJ82J"
+msgstr "Hello, world!"
+
+#: src/components/GitHubLink.tsx
+msgid "80g19N"
+msgstr "View on GitHub"
+
+#: src/components/LocaleSwitcher.tsx
+msgid "dISpGP"
+msgstr "Switch language"
+
+#: src/components/PlaygroundByline.tsx
+msgid "GAUX9p"
+msgstr "Source code"
+
+#: src/components/PlaygroundByline.tsx
+msgid "_6_sPX"
+msgstr "Docs"
+
+#: src/components/PlaygroundSidebar.tsx
+msgid "XqRXu6"
+msgstr "Playground"
+
+#: src/components/PlaygroundSidebar.tsx
+msgid "SRsuWF"
+msgstr "Close navigation"
+
+#: src/components/PlaygroundSidebar.tsx
+msgid "oM3yjO"
+msgstr "Open navigation"
+
+#: src/components/ThemeToggle.tsx
+msgid "dLFYnK"
+msgstr "Switch to light theme"
+
+#: src/components/ThemeToggle.tsx
+msgid "sDxHcF"
+msgstr "Switch to dark theme"

examples/example-app-router-patterns/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/example-app-router-patterns/next.config.mjs

@@ -0,0 +1,21 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin({
+  requestConfig: './src/i18n/request.ts',
+  experimental: {
+    extract: true,
+    srcPath: './src',
+    messages: {
+      path: './messages',
+      format: 'po',
+      locales: 'infer',
+      sourceLocale: 'en',
+      precompile: true
+    }
+  }
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withNextIntl(nextConfig);

examples/example-app-router-patterns/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "example-app-router-patterns",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src && prettier src --check",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "codehike": "^1.0.7",
+    "lucide-react": "^0.545.0",
+    "next": "^15.5.0",
+    "next-intl": "^4.0.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.12"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@types/node": "^20.14.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "9.11.1",
+    "eslint-config-next": "^15.5.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "typescript": "^5.5.3"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "trailingComma": "none",
+    "plugins": [
+      "prettier-plugin-organize-imports",
+      "prettier-plugin-tailwindcss"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

examples/example-app-router-patterns/postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+};
+export default config;