feat!: Next.js 13 RSC integration

.github/workflows/main.yml

@@ -21,6 +21,9 @@ jobs:
       - run: yarn workspace example run build
       - run: yarn workspace example-advanced run build
       - run: yarn workspace example-next-13 run build
+      - run: yarn workspace example-next-13-advanced run build
+      - run: yarn workspace example-next-13-named-routes run build
+      - run: yarn workspace example-next-13-with-pages run build
 
       - run: yarn workspaces run lint
       - run: yarn workspaces run test

.github/workflows/publish.yml

@@ -16,7 +16,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - uses: bahmutov/npm-install@v1
       # Seems like after squash & merge the author is unknown to lerna
-      - run: git config --global user.email "jan@amann.me" && git config --global user.name "Jan Amann"
+      - run: git config --global user.email "jan@amann.work" && git config --global user.name "Jan Amann"
       - run: yarn run publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

lerna.json

@@ -6,6 +6,9 @@
     "packages/example",
     "packages/example-advanced",
     "packages/example-next-13",
+    "packages/example-next-13-advanced",
+    "packages/example-next-13-named-routes",
+    "packages/example-next-13-with-pages",
     "packages/website"
   ],
   "useWorkspaces": true,

package.json

@@ -10,6 +10,9 @@
     "packages/next-intl",
     "packages/example",
     "packages/example-next-13",
+    "packages/example-next-13-advanced",
+    "packages/example-next-13-named-routes",
+    "packages/example-next-13-with-pages",
     "packages/example-advanced",
     "packages/website"
   ],

packages/example-advanced/package.json

@@ -15,10 +15,10 @@
     "next": "^13.0.0",
     "next-intl": "^2.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.6.3"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "typescript": "^4.6.3",
     "@testing-library/react": "^13.0.0",
     "@types/accept-language-parser": "^1.5.3",
     "@types/lodash": "^4.14.176",

packages/example-advanced/src/pages/api/hello.tsx

@@ -26,7 +26,7 @@ export default async function handler(
     namespace: 'Index'
   });
 
-  // Creates the same object that is returned by `useIntl`.
+  // Creates the same object that is returned by `useFormatter`.
   const format = createFormatter({locale});
 
   res.status(200).json({

packages/example-next-13-advanced/.eslintrc.js

@@ -0,0 +1,15 @@
+require('eslint-config-molindo/setupPlugins');
+
+module.exports = {
+  env: {
+    node: true
+  },
+  extends: [
+    'molindo/typescript',
+    'molindo/react',
+    'plugin:@next/next/recommended'
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off'
+  }
+};

packages/example-next-13-advanced/.gitignore

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

packages/example-next-13-advanced/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

packages/example-next-13-advanced/README.md

@@ -0,0 +1,3 @@
+# example-next-13-advanced
+
+An example that showcases usage of `next-intl` in the `app` folder of Next.js 13.

packages/example-next-13-advanced/global.d.ts

@@ -0,0 +1,3 @@
+// Declaring this interface provides type safety for message keys
+type Messages = typeof import('./messages/en.json');
+declare interface IntlMessages extends Messages {}

packages/example-next-13-advanced/messages/de.json

@@ -0,0 +1,42 @@
+{
+  "Index": {
+    "title": "Start",
+    "description": "Das ist die Startseite.",
+    "rich": "Das ist <important>formatierter</important> Test.",
+    "globalDefaults": "<highlight>{globalString}</highlight>"
+  },
+  "LocaleLayout": {
+    "title": "next-intl Beispiel",
+    "description": "Das ist ein Beispiel, wie next-intl im `app`-Verzeichnis verwendet werden kann."
+  },
+  "Client": {
+    "title": "Client",
+    "description": "Dise Seite wird auf der Client-Seite initialisiert."
+  },
+  "Nested": {
+    "title": "Verschachtelt",
+    "description": "Das ist eine verschachtelte Seite."
+  },
+  "Navigation": {
+    "home": "Start",
+    "client": "Client-Seite",
+    "nested": "Verschachtelte Seite"
+  },
+  "NotFound": {
+    "title": "Diese Seite wurde nicht gefunden (404)"
+  },
+  "LocaleSwitcher": {
+    "switchLocale": "Zu {locale, select, de {Deutsch} en {Englisch} other {Unbekannt}} wechseln"
+  },
+  "Counter": {
+    "count": "Aktuell:",
+    "increment": "Erhöhen"
+  },
+  "ClientCounter": {
+    "count": "Aktuell: {count}",
+    "increment": "Erhöhen"
+  },
+  "ApiRoute": {
+    "hello": "Hallo {name}!"
+  }
+}

packages/example-next-13-advanced/messages/en.json

@@ -0,0 +1,42 @@
+{
+  "Index": {
+    "title": "Home",
+    "description": "This is the home page.",
+    "rich": "This is a <important>rich</important> text.",
+    "globalDefaults": "<highlight>{globalString}</highlight>"
+  },
+  "LocaleLayout": {
+    "title": "next-intl example",
+    "description": "This is an example of using next-intl in the `app` directory."
+  },
+  "Client": {
+    "title": "Client",
+    "description": "This page hydrates on the client side."
+  },
+  "Nested": {
+    "title": "Nested",
+    "description": "This is a nested page."
+  },
+  "Navigation": {
+    "home": "Home",
+    "client": "Client page",
+    "nested": "Nested page"
+  },
+  "NotFound": {
+    "title": "This page was not found (404)"
+  },
+  "LocaleSwitcher": {
+    "switchLocale": "Switch to {locale, select, de {German} en {English} other {Unknown}}"
+  },
+  "Counter": {
+    "count": "Current count:",
+    "increment": "Increment"
+  },
+  "ClientCounter": {
+    "count": "Current count: {count}",
+    "increment": "Increment"
+  },
+  "ApiRoute": {
+    "hello": "Hello {name}!"
+  }
+}

packages/example-next-13-advanced/messages/es.json

@@ -0,0 +1,42 @@
+{
+  "Index": {
+    "title": "Inicio",
+    "description": "Esta es la página de inicio.",
+    "rich": "Este es un texto <important>importante</important>.",
+    "globalDefaults": "<highlight>{globalString}</highlight>"
+  },
+  "LocaleLayout": {
+    "title": "Ejemplo next-intl",
+    "description": "Este es un ejemplo de cómo usar next-intl en el directorio app."
+  },
+  "Client": {
+    "title": "Cliente",
+    "description": "Esta página se hidrata en el lado del cliente."
+  },
+  "Nested": {
+    "title": "Anidada",
+    "description": "Esta es una página anidada."
+  },
+  "Navigation": {
+    "home": "Inicio",
+    "client": "Página del cliente",
+    "nested": "Página anidada"
+  },
+  "NotFound": {
+    "title": "Esta página no se encontró (404)"
+  },
+  "LocaleSwitcher": {
+    "switchLocale": "Cambiar a {locale, select, de {Alemán} en {Inglés} other {Desconocido}}"
+  },
+  "Counter": {
+    "count": "Conteo actual:",
+    "increment": "Incrementar"
+  },
+  "ClientCounter": {
+    "count": "Conteo actual: {count}",
+    "increment": "Incrementar"
+  },
+  "ApiRoute": {
+    "hello": "¡Hola {name}!"
+  }
+}

packages/example-next-13-advanced/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/example-next-13-advanced/next.config.js

@@ -0,0 +1,40 @@
+const ms = require('ms');
+const withNextIntl = require('next-intl/plugin')();
+
+module.exports = withNextIntl({
+  experimental: {appDir: true},
+  rewrites() {
+    return [
+      {
+        source: '/de/verschachtelt',
+        destination: '/de/nested'
+      },
+      {
+        source: '/es/anidada',
+        destination: '/es/nested'
+      }
+    ];
+  },
+  headers() {
+    return [
+      {
+        source: '/((?!_next|assets|favicon.ico).*)',
+        missing: [
+          {
+            type: 'header',
+            key: 'Next-Router-Prefetch'
+          }
+        ],
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: [
+              `s-maxage=` + ms('1d') / 1000,
+              `stale-while-revalidate=` + ms('1y') / 1000
+            ].join(', ')
+          }
+        ]
+      }
+    ];
+  }
+});

packages/example-next-13-advanced/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "example-next-13-advanced",
+  "version": "2.9.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src && tsc",
+    "test": "playwright test",
+    "test:watch": "chokidar 'tests/main.spec.ts' -c 'npm run test'",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "ms": "2.1.3",
+    "next": "13.2.4",
+    "next-intl": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.3",
+    "@playwright/test": "^1.29.0",
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.23",
+    "chokidar-cli": "3.0.0",
+    "eslint": "^8.12.0",
+    "eslint-config-molindo": "^6.0.0",
+    "eslint-config-next": "^13.0.0"
+  }
+}

packages/example-next-13/playwright.config.ts → packages/example-next-13-advanced/playwright.config.ts

@@ -11,6 +11,7 @@ const config: PlaywrightTestConfig = {
     }
   ],
   webServer: {
+    reuseExistingServer: true,
     command: 'yarn start',
     port: 3000
   }

packages/example-next-13-advanced/src/app/[locale]/[...rest]/page.tsx

@@ -0,0 +1,9 @@
+import {notFound} from 'next/navigation';
+
+export default function CatchAll() {
+  // `not-found` currently only renders when triggered by the `notFound` function
+  // https://beta.nextjs.org/docs/api-reference/file-conventions/not-found
+  notFound();
+
+  return null;
+}

packages/example-next-13-advanced/src/app/[locale]/api/route.ts

@@ -0,0 +1,12 @@
+import {getTranslations} from 'next-intl/server';
+import {NextRequest, NextResponse} from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const name = request.nextUrl.searchParams.get('name');
+  if (!name) {
+    return new Response('Search param `name` was not provided.', {status: 400});
+  }
+
+  const t = await getTranslations('ApiRoute');
+  return NextResponse.json({message: t('hello', {name})});
+}

packages/example-next-13-advanced/src/app/[locale]/client/ClientContent.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import {useNow, Link} from 'next-intl';
+import {usePathname} from 'next-intl/client';
+
+export default function ClientContent() {
+  const now = useNow();
+
+  return (
+    <>
+      <p data-testid="NowFromClient">{now.toISOString()}</p>
+      <Link href="/">Go to home</Link>
+      <p data-testid="UnlocalizedPathname">{usePathname()}</p>
+    </>
+  );
+}

packages/example-next-13-advanced/src/app/[locale]/client/DelayedServerContent.tsx

@@ -0,0 +1,13 @@
+import {useNow} from 'next-intl';
+import {use} from 'react';
+
+export default function DelayedServerContent() {
+  use(new Promise((resolve) => setTimeout(resolve, 50)));
+  const now = useNow();
+
+  return (
+    <>
+      <p data-testid="NowFromServerDelayed">{now.toISOString()}</p>
+    </>
+  );
+}

packages/example-next-13-advanced/src/app/[locale]/client/page.tsx

@@ -0,0 +1,26 @@
+import {
+  useTranslations,
+  useLocale,
+  useNow,
+  NextIntlClientProvider
+} from 'next-intl';
+import PageLayout from '../../../components/PageLayout';
+import ClientContent from './ClientContent';
+import DelayedServerContent from './DelayedServerContent';
+
+export default function Client() {
+  const t = useTranslations('Client');
+  const locale = useLocale();
+  const now = useNow();
+
+  return (
+    <PageLayout title={t('title')}>
+      <p>{t('description')}</p>
+      <p data-testid="NowFromServer">{now.toISOString()}</p>
+      <DelayedServerContent />
+      <NextIntlClientProvider locale={locale} now={now.toISOString()}>
+        <ClientContent />
+      </NextIntlClientProvider>
+    </PageLayout>
+  );
+}