update playground to nextjs 15 canary and rootparams

Author: amannn

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

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -12,20 +12,20 @@
     "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/react": "^3.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "lodash": "^4.17.21",
     "ms": "2.1.3",
-    "next": "^14.2.4",
+    "next": "15.1.1-canary.12",
     "next-intl": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@mdx-js/loader": "^3.0.1",
-    "@next/mdx": "^14.2.5",
+    "@mdx-js/loader": "^3.1.0",
+    "@next/mdx": "15.1.1-canary.12",
     "@playwright/test": "^1.48.1",
     "@storybook/nextjs": "^8.2.9",
     "@storybook/react": "^8.2.9",

examples/example-app-router-playground/src/app/[locale]/about/page.tsx

@@ -1,12 +1,7 @@
-import {Locale} from 'next-intl';
+import {getLocale} from 'next-intl/server';
 
-type Props = {
-  params: {
-    locale: Locale;
-  };
-};
-
-export default async function AboutPage({params}: Props) {
-  const Content = (await import(`./${params.locale}.mdx`)).default;
+export default async function AboutPage() {
+  const locale = await getLocale();
+  const Content = (await import(`./${locale}.mdx`)).default;
   return <Content />;
 }

examples/example-app-router-playground/src/app/[locale]/api/route.ts

@@ -1,19 +1,12 @@
 import {NextRequest, NextResponse} from 'next/server';
-import {Locale} from 'next-intl';
 import {getTranslations} from 'next-intl/server';
 
-type Props = {
-  params: {
-    locale: Locale;
-  };
-};
-
-export async function GET(request: NextRequest, {params: {locale}}: Props) {
+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({locale, namespace: 'ApiRoute'});
+  const t = await getTranslations('ApiRoute');
   return NextResponse.json({message: t('hello', {name})});
 }

examples/example-app-router-playground/src/app/[locale]/layout.tsx

@@ -1,6 +1,5 @@
 import {Metadata} from 'next';
-import {notFound} from 'next/navigation';
-import {Locale, NextIntlClientProvider, hasLocale} from 'next-intl';
+import {NextIntlClientProvider, useLocale} from 'next-intl';
 import {
   getFormatter,
   getNow,
@@ -11,18 +10,17 @@ import {ReactNode} from 'react';
 import {routing} from '@/i18n/routing';
 import Navigation from '../../components/Navigation';
 
-type Props = {
-  children: ReactNode;
-  params: {locale: Locale};
-};
+export async function generateStaticParams() {
+  return routing.locales.map((locale) => ({locale}));
+}
+
+export const dynamicParams = false;
 
-export async function generateMetadata({
-  params: {locale}
-}: Omit<Props, 'children'>): Promise<Metadata> {
-  const t = await getTranslations({locale, namespace: 'LocaleLayout'});
-  const formatter = await getFormatter({locale});
-  const now = await getNow({locale});
-  const timeZone = await getTimeZone({locale});
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations('LocaleLayout');
+  const formatter = await getFormatter();
+  const now = await getNow();
+  const timeZone = await getTimeZone();
 
   return {
     metadataBase: new URL('http://localhost:3000'),
@@ -35,10 +33,12 @@ export async function generateMetadata({
   };
 }
 
-export default function LocaleLayout({children, params: {locale}}: Props) {
-  if (!hasLocale(routing.locales, locale)) {
-    notFound();
-  }
+type Props = {
+  children: ReactNode;
+};
+
+export default function LocaleLayout({children}: Props) {
+  const locale = useLocale();
 
   return (
     <html lang={locale}>

examples/example-app-router-playground/src/app/[locale]/news/[articleId]/page.tsx

@@ -1,29 +1,34 @@
 import {Metadata} from 'next';
-import {Locale, useTranslations} from 'next-intl';
+import {useTranslations} from 'next-intl';
+import {getLocale} from 'next-intl/server';
+import {use} from 'react';
 import {getPathname} from '@/i18n/routing';
 
 type Props = {
-  params: {
-    locale: Locale;
+  params: Promise<{
     articleId: string;
-  };
+  }>;
 };
 
 export async function generateMetadata({params}: Props): Promise<Metadata> {
+  const {articleId} = await params;
+  const locale = await getLocale();
+
   return {
     alternates: {
       canonical: getPathname({
         href: {
           pathname: '/news/[articleId]',
-          params: {articleId: params.articleId}
+          params: {articleId}
         },
-        locale: params.locale
+        locale
       })
     }
   };
 }
 
 export default function NewsArticle({params}: Props) {
+  const {articleId} = use(params);
   const t = useTranslations('NewsArticle');
-  return <h1>{t('title', {articleId: params.articleId})}</h1>;
+  return <h1>{t('title', {articleId})}</h1>;
 }

examples/example-app-router-playground/src/app/[locale]/opengraph-image.tsx

@@ -1,14 +1,7 @@
 import {ImageResponse} from 'next/og';
-import {Locale} from 'next-intl';
 import {getTranslations} from 'next-intl/server';
 
-type Props = {
-  params: {
-    locale: Locale;
-  };
-};
-
-export default async function Image({params: {locale}}: Props) {
-  const t = await getTranslations({locale, namespace: 'OpenGraph'});
+export default async function Image() {
+  const t = await getTranslations('OpenGraph');
   return new ImageResponse(<div style={{fontSize: 128}}>{t('title')}</div>);
 }

examples/example-app-router-playground/src/app/[locale]/page.tsx

@@ -1,9 +1,12 @@
 import Image from 'next/image';
 import {useFormatter, useNow, useTimeZone, useTranslations} from 'next-intl';
+import {use} from 'react';
 import DropdownMenu from '@/components/DropdownMenu';
 import RichText from '@/components/RichText';
 import {Link} from '@/i18n/routing';
-import AsyncComponent from '../../components/AsyncComponent';
+import AsyncComponent, {
+  AsyncComponentGerman
+} from '../../components/AsyncComponent';
 import AsyncComponentWithNamespaceAndLocale from '../../components/AsyncComponentWithNamespaceAndLocale';
 import AsyncComponentWithoutNamespace from '../../components/AsyncComponentWithoutNamespace';
 import AsyncComponentWithoutNamespaceAndLocale from '../../components/AsyncComponentWithoutNamespaceAndLocale';
@@ -16,7 +19,7 @@ import MessagesAsPropsCounter from '../../components/client/01-MessagesAsPropsCo
 import MessagesOnClientCounter from '../../components/client/02-MessagesOnClientCounter';
 
 type Props = {
-  searchParams: Record<string, string>;
+  searchParams: Promise<Record<string, string>>;
 };
 
 export default function Index({searchParams}: Props) {
@@ -55,11 +58,14 @@ export default function Index({searchParams}: Props) {
         </Link>
       </div>
       <ClientLink href="/">Link on client without provider</ClientLink>
-      <p data-testid="SearchParams">{JSON.stringify(searchParams, null, 2)}</p>
+      <p data-testid="SearchParams">
+        {JSON.stringify(use(searchParams), null, 2)}
+      </p>
       <p data-testid="HasTitle">{JSON.stringify(t.has('title'))}</p>
       <Image alt="" height={77} priority src="/assets/image.jpg" width={128} />
       <AsyncComponent />
       <AsyncComponentWithNamespaceAndLocale />
+      <AsyncComponentGerman />
       <AsyncComponentWithoutNamespace />
       <AsyncComponentWithoutNamespaceAndLocale />
       <DropdownMenu />

examples/example-app-router-playground/src/app/layout.tsx

@@ -1,8 +1,7 @@
-import {getLocale, getTranslations} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 
 export default async function AsyncComponentWithNamespaceAndLocale() {
-  const locale = await getLocale();
-  const t = await getTranslations({locale, namespace: 'AsyncComponent'});
+  const t = await getTranslations('AsyncComponent');
 
   return (
     <div data-testid="AsyncComponentWithoutNamespaceAndLocale">
@@ -12,11 +11,10 @@ export default async function AsyncComponentWithNamespaceAndLocale() {
 }
 
 export async function TypeTest() {
-  const locale = await getLocale();
-  const t = await getTranslations({locale});
+  const t = await getTranslations();
 
   // @ts-expect-error
-  await getTranslations({locale, namespace: 'Unknown'});
+  await getTranslations('Unknown');
 
   // @ts-expect-error
   t('AsyncComponent.unknown');

examples/example-app-router-playground/src/app/not-found.tsx

@@ -1,8 +1,7 @@
-import {getLocale, getTranslations} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 
 export default async function AsyncComponentWithoutNamespaceAndLocale() {
-  const locale = await getLocale();
-  const t = await getTranslations({locale});
+  const t = await getTranslations();
 
   return (
     <div data-testid="AsyncComponentWithoutNamespaceAndLocale">
@@ -12,8 +11,7 @@ export default async function AsyncComponentWithoutNamespaceAndLocale() {
 }
 
 export async function TypeTest() {
-  const locale = await getLocale();
-  const t = await getTranslations({locale});
+  const t = await getTranslations();
 
   // @ts-expect-error
   t('AsyncComponent.unknown');

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

@@ -1,4 +1,5 @@
 import {headers} from 'next/headers';
+import {unstable_rootParams as rootParams} from 'next/server';
 import {Formats, hasLocale} from 'next-intl';
 import {getRequestConfig} from 'next-intl/server';
 import defaultMessages from '../../messages/en.json';
@@ -30,15 +31,17 @@ export const formats = {
   }
 } satisfies Formats;
 
-export default getRequestConfig(async ({requestLocale}) => {
-  // Typically corresponds to the `[locale]` segment
-  const requested = await requestLocale;
-  const locale = hasLocale(routing.locales, requested)
-    ? requested
-    : routing.defaultLocale;
+export default getRequestConfig(async ({locale}) => {
+  if (!locale) {
+    const params = await rootParams();
+    locale = hasLocale(routing.locales, params.locale)
+      ? params.locale
+      : routing.defaultLocale;
+  }
 
-  const now = headers().get('x-now');
-  const timeZone = headers().get('x-time-zone') ?? 'Europe/Vienna';
+  const headersList = await headers();
+  const now = headersList.get('x-now');
+  const timeZone = headersList.get('x-time-zone') ?? 'Europe/Vienna';
   const localeMessages = (await import(`../../messages/${locale}.json`))
     .default;
   const messages = {...defaultMessages, ...localeMessages};