Provide example with test

Author: amannn

examples/example-app-router-provided-locale/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  env: {
+    node: true
+  },
+  extends: [
+    'molindo/typescript',
+    'molindo/react',
+    'plugin:@next/next/recommended'
+  ]
+};

examples/example-app-router-provided-locale/.gitignore

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

examples/example-app-router-provided-locale/README.md

@@ -0,0 +1,14 @@
+# example-app-router-provided-locale
+
+An example that showcases how an app can provide a locale in `i18n.ts` to `next-intl` in an App Router setup. This can be used for single-language setups and apps where the locale is read from the user settings instead of the pathname.
+
+**Note that:**
+
+ 1. No middleware needs to be configured.
+ 2. The navigation APIs from `next-intl` don't need to be used.
+
+## 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-provided-locale)

examples/example-app-router-provided-locale/messages/de.json

@@ -0,0 +1,11 @@
+{
+  "Index": {
+    "title": "Start",
+    "description": "Das ist die Startseite.",
+    "navigateToAbout": "Zu Über uns navigieren"
+  },
+  "About": {
+    "title": "Über",
+    "description": "Das ist die Über-uns-Seite."
+  }
+}

examples/example-app-router-provided-locale/messages/en.json

@@ -0,0 +1,11 @@
+{
+  "Index": {
+    "title": "Home",
+    "description": "This is the home page.",
+    "navigateToAbout": "Navigate to about"
+  },
+  "About": {
+    "title": "About",
+    "description": "This is the about page."
+  }
+}

examples/example-app-router-provided-locale/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.

examples/example-app-router-provided-locale/next.config.js

@@ -0,0 +1,3 @@
+const withNextIntl = require('next-intl/plugin')();
+
+module.exports = withNextIntl();

examples/example-app-router-provided-locale/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "example-app-router-provided-locale",
+  "version": "2.10.2",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src && tsc",
+    "test": "playwright test",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^14.2.1",
+    "next-intl": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^20.1.2",
+    "@types/react": "^18.2.29",
+    "@playwright/test": "^1.41.2",
+    "eslint": "^8.54.0",
+    "eslint-config-molindo": "^7.0.0",
+    "eslint-config-next": "^14.0.3",
+    "typescript": "^5.2.2"
+  }
+}

examples/example-app-router-provided-locale/playwright.config.ts

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import type {PlaywrightTestConfig} from '@playwright/test';
+import {devices} from '@playwright/test';
+
+// Use a distinct port on CI to avoid conflicts during concurrent tests
+const PORT = process.env.CI ? 3001 : 3000;
+
+const config: PlaywrightTestConfig = {
+  retries: process.env.CI ? 1 : 0,
+  testDir: './tests',
+  projects: [
+    {
+      name: 'chromium',
+      use: devices['Desktop Chrome']
+    }
+  ],
+  webServer: {
+    command: `PORT=${PORT} pnpm start`,
+    port: PORT,
+    reuseExistingServer: true
+  }
+};
+
+export default config;

examples/example-app-router-provided-locale/public/favicon.ico

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

examples/example-app-router-provided-locale/src/app/about/page.tsx

@@ -0,0 +1,21 @@
+import {NextIntlClientProvider, useLocale} from 'next-intl';
+import {ReactNode} from 'react';
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function LocaleLayout({children}: Props) {
+  const locale = useLocale();
+
+  return (
+    <html lang={locale}>
+      <head>
+        <title>next-intl</title>
+      </head>
+      <body>
+        <NextIntlClientProvider>{children}</NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

examples/example-app-router-provided-locale/src/app/layout.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+import {useTranslations} from 'next-intl';
+import PageLayout from '@/components/PageLayout';
+
+export default function Index() {
+  const t = useTranslations('Index');
+
+  return (
+    <PageLayout title={t('title')}>
+      <p>{t('description')}</p>
+      <p>
+        <Link href="/about">{t('navigateToAbout')}</Link>
+      </p>
+    </PageLayout>
+  );
+}

examples/example-app-router-provided-locale/src/app/page.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>
+    </>
+  );
+}

examples/example-app-router-provided-locale/src/components/PageLayout.tsx

@@ -0,0 +1,12 @@
+import {getRequestConfig} from 'next-intl/server';
+
+export default getRequestConfig(async () => {
+  // This can either be defined statically if only a single locale
+  // is supported, or alternatively read from the user settings.
+  const locale = 'en';
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default
+  };
+});

examples/example-app-router-provided-locale/src/i18n.ts

@@ -0,0 +1,9 @@
+import {test as it} from '@playwright/test';
+
+it('uses the provided locale', async ({page}) => {
+  await page.goto('/');
+  page.getByRole('heading', {name: 'Home'});
+
+  await page.goto('/');
+  page.getByRole('heading', {name: 'About'});
+});

examples/example-app-router-provided-locale/tests/main.spec.ts

@@ -0,0 +1,39 @@
+{
+  "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"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}