migrate app router playground, add base path test

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

@@ -9,6 +9,7 @@ const withMdx = mdxPlugin();
 export default withMdx(
   withNextIntl({
     trailingSlash: process.env.TRAILING_SLASH === 'true',
+    basePath: process.env.BASE_PATH === 'true' ? '/base/path' : undefined,
     experimental: {
       staleTimes: {
         // Next.js 14.2 broke `locale-prefix-never.spec.ts`.

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

@@ -4,10 +4,11 @@
   "scripts": {
     "dev": "next dev",
     "lint": "eslint src && tsc",
-    "test": "pnpm run test:playwright:main && pnpm run test:playwright:locale-prefix-never && pnpm run test:playwright:trailing-slash && pnpm run test:jest",
+    "test": "pnpm run test:playwright:main && pnpm run test:playwright:locale-prefix-never && pnpm run test:playwright:trailing-slash && pnpm run test:jest && test:playwright:base-path",
     "test:playwright:main": "TEST_MATCH=main.spec.ts playwright test",
     "test:playwright:locale-prefix-never": "NEXT_PUBLIC_LOCALE_PREFIX=never pnpm build && TEST_MATCH=locale-prefix-never.spec.ts playwright test",
     "test:playwright:trailing-slash": "TRAILING_SLASH=true pnpm build && TEST_MATCH=trailing-slash.spec.ts playwright test",
+    "test:playwright:base-path": "BASE_PATH=true pnpm build && TEST_MATCH=base-path.spec.ts playwright test",
     "test:jest": "jest",
     "build": "next build",
     "start": "next start",

examples/example-app-router-playground/src/components/ClientLink.tsx

@@ -1,10 +1,8 @@
 'use client';
 
 import {ComponentProps} from 'react';
-import {Link, Pathnames} from '@/i18n/routing';
+import {Link} from '@/i18n/routing';
 
-export default function NavigationLink<Pathname extends Pathnames>(
-  props: ComponentProps<typeof Link<Pathname>>
-) {
+export default function NavigationLink(props: ComponentProps<typeof Link>) {
   return <Link {...props} />;
 }

examples/example-app-router-playground/src/components/NavigationLink.tsx

@@ -2,12 +2,12 @@
 
 import {useSelectedLayoutSegment} from 'next/navigation';
 import {ComponentProps} from 'react';
-import {Link, Pathnames} from '@/i18n/routing';
+import {Link} from '@/i18n/routing';
 
-export default function NavigationLink<Pathname extends Pathnames>({
+export default function NavigationLink({
   href,
   ...rest
-}: ComponentProps<typeof Link<Pathname>>) {
+}: ComponentProps<typeof Link>) {
   const selectedLayoutSegment = useSelectedLayoutSegment();
   const pathname = selectedLayoutSegment ? `/${selectedLayoutSegment}` : '/';
   const isActive = pathname === href;

examples/example-app-router-playground/src/i18n/routing.ts

@@ -1,4 +1,4 @@
-import {createLocalizedPathnamesNavigation} from 'next-intl/navigation';
+import {createNavigation} from 'next-intl/navigation';
 import {defineRouting} from 'next-intl/routing';
 
 export const routing = defineRouting({
@@ -44,4 +44,4 @@ export type Pathnames = keyof typeof routing.pathnames;
 export type Locale = (typeof routing.locales)[number];
 
 export const {Link, getPathname, redirect, usePathname, useRouter} =
-  createLocalizedPathnamesNavigation(routing);
+  createNavigation(routing);

examples/example-app-router-playground/src/middleware.ts

@@ -4,6 +4,11 @@ import {routing} from './i18n/routing';
 export default createMiddleware(routing);
 
 export const config = {
-  // Skip all paths that should not be internationalized
-  matcher: ['/((?!_next|.*\\..*).*)']
+  matcher: [
+    // Skip all paths that should not be internationalized
+    '/((?!_next|.*\\..*).*)',
+
+    // Necessary for base path to work
+    '/'
+  ]
 };

examples/example-app-router-playground/tests/base-path.spec.ts

@@ -0,0 +1,22 @@
+import {test as it, expect} from '@playwright/test';
+import {assertLocaleCookieValue} from './utils';
+
+it('can use the router', async ({page}) => {
+  await page.goto('/base/path');
+  await assertLocaleCookieValue(page, 'en', {path: '/base/path'});
+
+  await page.getByRole('button', {name: 'Go to nested page'}).click();
+  await expect(page).toHaveURL('/base/path/nested');
+  await page.getByRole('link', {name: 'Home'}).click();
+  await page.getByRole('link', {name: 'Switch to German'}).click();
+
+  await expect(page).toHaveURL('/base/path/de');
+  assertLocaleCookieValue(page, 'de', {path: '/base/path'});
+  await page.getByRole('button', {name: 'Go to nested page'}).click();
+  await expect(page).toHaveURL('/base/path/de/verschachtelt');
+  await page.getByRole('link', {name: 'Start'}).click();
+  await page.getByRole('link', {name: 'Zu Englisch wechseln'}).click();
+
+  await expect(page).toHaveURL('/base/path');
+  assertLocaleCookieValue(page, 'en', {path: '/base/path'});
+});

examples/example-app-router-playground/tests/main.spec.ts

@@ -1,23 +1,8 @@
-import {test as it, expect, Page, BrowserContext} from '@playwright/test';
-import getAlternateLinks from './getAlternateLinks';
+import {test as it, expect, BrowserContext} from '@playwright/test';
+import {getAlternateLinks, assertLocaleCookieValue} from './utils';
 
 const describe = it.describe;
 
-async function assertLocaleCookieValue(
-  page: Page,
-  value: string,
-  otherProps?: Record<string, unknown>
-) {
-  const cookie = (await page.context().cookies()).find(
-    (cur) => cur.name === 'NEXT_LOCALE'
-  );
-  expect(cookie).toMatchObject({
-    name: 'NEXT_LOCALE',
-    value,
-    ...otherProps
-  });
-}
-
 function getPageLoadTracker(context: BrowserContext) {
   const state = {numPageLoads: 0};
 

examples/example-app-router-playground/tests/trailing-slash.spec.ts

@@ -1,5 +1,5 @@
 import {test as it, expect} from '@playwright/test';
-import getAlternateLinks from './getAlternateLinks';
+import {getAlternateLinks} from './utils';
 
 it('redirects to a locale prefix correctly', async ({request}) => {
   const response = await request.get('/', {

examples/example-app-router-playground/tests/utils.ts

@@ -0,0 +1,28 @@
+import {APIResponse, expect, Page} from '@playwright/test';
+
+export async function getAlternateLinks(response: APIResponse) {
+  return (
+    response
+      .headers()
+      .link.split(', ')
+      // On CI, Playwright uses a different host somehow
+      .map((cur) => cur.replace(/0\.0\.0\.0/g, 'localhost'))
+      // Normalize ports
+      .map((cur) => cur.replace(/localhost:\d{4}/g, 'localhost:3000'))
+  );
+}
+
+export async function assertLocaleCookieValue(
+  page: Page,
+  value: string,
+  otherProps?: Record<string, unknown>
+) {
+  const cookie = (await page.context().cookies()).find(
+    (cur) => cur.name === 'NEXT_LOCALE'
+  );
+  expect(cookie).toMatchObject({
+    name: 'NEXT_LOCALE',
+    value,
+    ...otherProps
+  });
+}