feat: Add support for using next-intl in the app folder with Next…

….js 13 (see https://next-intl-docs.vercel.app/docs/next-13, #144)

.github/workflows/main.yml

@@ -10,12 +10,17 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       # The Remix example unfortunately doesn't seem to support yarn workspaces
       - uses: bahmutov/npm-install@v1
+      - run: yarn playwright install --with-deps
+
+      # The order matters here
       - run: yarn workspace use-intl run build
       - run: yarn workspace next-intl run build
-      - run: yarn workspaces run lint
-      - run: yarn workspaces run test --ci --maxWorkers=2
       - run: yarn workspace example run build
       - run: yarn workspace example-advanced run build
+      - run: yarn workspace example-next-13 run build
+
+      - run: yarn workspaces run lint
+      - run: yarn workspaces run test

.github/workflows/publish.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 16.x
           registry-url: 'https://registry.npmjs.org'
       - uses: bahmutov/npm-install@v1
       # Seems like after squash & merge the author is unknown to lerna

.gitignore

@@ -2,3 +2,4 @@
 .DS_Store
 node_modules
 dist
+.vscode

lerna.json

@@ -5,6 +5,7 @@
     "packages/next-intl",
     "packages/example",
     "packages/example-advanced",
+    "packages/example-next-13",
     "packages/website"
   ],
   "useWorkspaces": true,

package.json

@@ -9,6 +9,7 @@
     "packages/use-intl",
     "packages/next-intl",
     "packages/example",
+    "packages/example-next-13",
     "packages/example-advanced",
     "packages/website"
   ],

packages/example-advanced/.eslintrc.js

@@ -10,8 +10,6 @@ module.exports = {
     node: true
   },
   rules: {
-    'react/react-in-jsx-scope': 'off',
-    'jsx-a11y/anchor-is-valid': 'off',
-    'react/display-name': 'off'
+    'react/react-in-jsx-scope': 'off'
   }
 };

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

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

packages/example-next-13/.gitignore

@@ -0,0 +1,7 @@
+/node_modules
+/.next/
+.DS_Store
+tsconfig.tsbuildinfo
+/test-results/
+/playwright-report/
+/playwright/.cache/

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

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

packages/example-next-13/README.md

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

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

@@ -0,0 +1,12 @@
+{
+  "Head": {
+    "title": "next-intl Beispiel"
+  },
+  "Index": {
+    "title": "Start",
+    "description": "Das ist die Startseite."
+  },
+  "LocaleSwitcher": {
+    "switchLocale": "Zu {locale, select, de {Deutsch} en {Englisch} other {Unbekannt}} wechseln"
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "Head": {
+    "title": "next-intl example"
+  },
+  "Index": {
+    "title": "Home",
+    "description": "This is the home page."
+  },
+  "LocaleSwitcher": {
+    "switchLocale": "Switch to {locale, select, de {German} en {English} other {Unknown}}"
+  }
+}

packages/example-next-13/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/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  experimental: {appDir: true}
+};

packages/example-next-13/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "example-next-13",
+  "version": "2.9.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src && tsc",
+    "test": "playwright test",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "accept-language-parser": "1.5.0",
+    "date-fns": "^2.16.1",
+    "lodash": "^4.17.21",
+    "next": "^13.0.5",
+    "next-intl": "^2.9.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.6.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.28.1",
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.23",
+    "eslint": "^8.12.0",
+    "eslint-config-molindo": "^6.0.0",
+    "eslint-config-next": "^13.0.0"
+  }
+}

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

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import type {PlaywrightTestConfig} from '@playwright/test';
+import {devices} from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  projects: [
+    {
+      name: 'chromium',
+      use: devices['Desktop Chrome']
+    }
+  ],
+  webServer: {
+    command: 'yarn start',
+    port: 3000
+  }
+};
+
+export default config;

packages/example-next-13/src/app/[locale]/head.tsx

@@ -0,0 +1,29 @@
+import {createTranslator} from 'next-intl';
+import {notFound} from 'next/navigation';
+
+type Props = {
+  params: {
+    locale: string;
+  };
+};
+
+export default async function Head({params: {locale}}: Props) {
+  let messages;
+  try {
+    messages = (await import(`../../../messages/${locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
+  // Currently you can use the core (non-React) APIs when you
+  // have to use next-intl in a Server Component like `Head`.
+  // In the future you'll be able to use the React APIs here as
+  // well (see https://next-intl-docs.vercel.app/docs/next-13).
+  const t = createTranslator({locale, messages});
+
+  return (
+    <>
+      <title>{t('Head.title')}</title>
+    </>
+  );
+}

packages/example-next-13/src/app/[locale]/layout.tsx

@@ -0,0 +1,26 @@
+import {NextIntlClientProvider} from 'next-intl/client';
+import {notFound} from 'next/navigation';
+import {ReactNode} from 'react';
+
+type Props = {
+  children: ReactNode;
+  params: {locale: string};
+};
+
+export default async function LocaleLayout({
+  children,
+  params: {locale}
+}: Props) {
+  let messages;
+  try {
+    messages = (await import(`../../../messages/${locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}

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

@@ -0,0 +1,16 @@
+'use client';
+
+import {useTranslations} from 'next-intl';
+import LocaleSwitcher from '../../components/LocaleSwitcher';
+import PageLayout from '../../components/PageLayout';
+
+export default function Index() {
+  const t = useTranslations('Index');
+
+  return (
+    <PageLayout title={t('title')}>
+      <p>{t('description')}</p>
+      <LocaleSwitcher />
+    </PageLayout>
+  );
+}

packages/example-next-13/src/app/layout.tsx

@@ -0,0 +1,20 @@
+import {ReactNode} from 'react';
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function RootLayout({children}: Props) {
+  // TODO: Here's a problem: When there's no cookie yet, we can't use the locale
+  // from the URL. Something like `require('next/navigation').usePathname()`
+  // would be great, but that uses non-server context currently, so not an
+  // option in server components. `params` is also not an option, since they are
+  // only available from matched segments downwards.
+  const lang = undefined;
+
+  return (
+    <html lang={lang}>
+      <body>{children}</body>
+    </html>
+  );
+}

packages/example-next-13/src/components/LocaleSwitcher.tsx

@@ -0,0 +1,14 @@
+import {useLocale, useTranslations} from 'next-intl';
+import Link from 'next/link';
+
+export default function LocaleSwitcher() {
+  const t = useTranslations('LocaleSwitcher');
+  const locale = useLocale();
+  const otherLocale = locale === 'en' ? 'de' : 'en';
+
+  return (
+    <Link href={'/' + otherLocale} prefetch={false}>
+      {t('switchLocale', {locale: otherLocale})}
+    </Link>
+  );
+}

packages/example-next-13/src/components/PageLayout.tsx

@@ -0,0 +1,25 @@
+import {ReactNode} from 'react';
+
+type Props = {
+  children?: ReactNode;
+  title: string;
+};
+
+export default function PageLayout({children, title}: Props) {
+  return (
+    <>
+      <div
+        style={{
+          padding: 24,
+          fontFamily: 'system-ui, sans-serif',
+          lineHeight: 1.5
+        }}
+      >
+        <div style={{maxWidth: 510}}>
+          <h1>{title}</h1>
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

packages/example-next-13/src/middleware.tsx

@@ -0,0 +1,6 @@
+import {createIntlMiddleware} from 'next-intl/server';
+
+export default createIntlMiddleware({
+  locales: ['en', 'de'],
+  defaultLocale: 'en'
+});

packages/example-next-13/tests/main.spec.ts

@@ -0,0 +1,29 @@
+import {test as it, expect} from '@playwright/test';
+
+it('handles i18n routing', async ({page}) => {
+  await page.goto('/');
+  await expect(page).toHaveURL(/\/en/);
+
+  // A cookie remembers the last locale
+  await page.goto('/de');
+  await page.goto('/');
+  await expect(page).toHaveURL(/\/de/);
+
+  await page.goto('/unknown');
+});
+
+it('can be used in the head', async ({page}) => {
+  await page.goto('/en');
+  await expect(page).toHaveTitle('next-intl example');
+
+  await page.goto('/de');
+  await expect(page).toHaveTitle('next-intl Beispiel');
+});
+
+it('can be used to localize the page', async ({page}) => {
+  await page.goto('/en');
+  page.locator('text=This is the home page.');
+
+  await page.goto('/de');
+  page.locator('text=Das ist die Startseite.');
+});

packages/example-next-13/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "extends": "eslint-config-molindo/tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}