docs: Update docs and examples to Next.js 15

docs/package.json

@@ -19,7 +19,7 @@
     "@vercel/speed-insights": "^1.0.12",
     "clsx": "^2.1.1",
     "http-status-codes": "^2.3.0",
-    "next": "^14.2.4",
+    "next": "^14.0.0",
     "nextra": "^3.0.13",
     "nextra-theme-docs": "^3.0.13",
     "react": "^18.3.1",

docs/pages/docs/environments/actions-metadata-route-handlers.mdx

@@ -21,7 +21,8 @@ To internationalize metadata like the page title, you can use functionality from
 ```tsx filename="layout.tsx"
 import {getTranslations} from 'next-intl/server';
 
-export async function generateMetadata({params: {locale}}) {
+export async function generateMetadata({params}) {
+  const {locale} = await params;
   const t = await getTranslations({locale, namespace: 'Metadata'});
 
   return {
@@ -115,7 +116,8 @@ If you're programmatically generating [Open Graph images](https://nextjs.org/doc
 import {ImageResponse} from 'next/og';
 import {getTranslations} from 'next-intl/server';
 
-export default async function OpenGraphImage({params: {locale}}) {
+export default async function OpenGraphImage({params}) {
+  const {locale} = await params;
   const t = await getTranslations({locale, namespace: 'OpenGraphImage'});
   return new ImageResponse(<div style={{fontSize: 128}}>{t('title')}</div>);
 }

docs/pages/docs/environments/error-files.mdx

@@ -82,7 +82,9 @@ For the 404 page to render, we need to call the `notFound` function in the root
 ```tsx filename="app/[locale]/layout.tsx"
 import {notFound} from 'next/navigation';
 
-export default function LocaleLayout({children, params: {locale}}) {
+export default async function LocaleLayout({children, params}) {
+  const {locale} = await params;
+
   // Ensure that the incoming `locale` is valid
   if (!routing.locales.includes(locale as any)) {
     notFound();

docs/pages/docs/environments/mdx.mdx

@@ -24,8 +24,10 @@ Now, in `page.tsx`, you can import the MDX content based on the user's locale:
 import {notFound} from 'next/navigation';
 
 export default async function HomePage({params}) {
+  const {locale} = await params;
+
   try {
-    const Content = (await import(`./${params.locale}.mdx`)).default;
+    const Content = (await import(`./${locale}.mdx`)).default;
     return <Content />;
   } catch (error) {
     notFound();

docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx

@@ -193,12 +193,13 @@ import {routing} from '@/i18n/routing';
 
 export default async function LocaleLayout({
   children,
-  params: {locale}
+  params
 }: {
   children: React.ReactNode;
-  params: {locale: string};
+  params: Promise<{locale: string}>;
 }) {
   // Ensure that the incoming `locale` is valid
+  const {locale} = await params;
   if (!routing.locales.includes(locale as any)) {
     notFound();
   }
@@ -300,7 +301,9 @@ import {setRequestLocale} from 'next-intl/server';
 import {notFound} from 'next/navigation';
 import {routing} from '@/i18n/routing';
 
-export default async function LocaleLayout({children, params: {locale}}) {
+export default async function LocaleLayout({children, params}) {
+  const {locale} = await params;
+
   // Ensure that the incoming `locale` is valid
   if (!routing.locales.includes(locale as any)) {
     notFound();
@@ -318,7 +321,9 @@ export default async function LocaleLayout({children, params: {locale}}) {
 ```tsx filename="app/[locale]/page.tsx"
 import {setRequestLocale} from 'next-intl/server';
 
-export default function IndexPage({params: {locale}}) {
+export default function IndexPage({params}) {
+  const {locale} = use(params);
+
   // Enable static rendering
   setRequestLocale(locale);
 
@@ -368,7 +373,8 @@ To achieve this, you can forward the `locale` that you receive from Next.js via
 ```tsx filename="page.tsx"
 import {getTranslations} from 'next-intl/server';
 
-export async function generateMetadata({params: {locale}}) {
+export async function generateMetadata({params}) {
+  const {locale} = await params;
   const t = await getTranslations({locale, namespace: 'Metadata'});
 
   return {

docs/pages/docs/routing.mdx

@@ -300,14 +300,15 @@ import {notFound} from 'next';
 import {fetchContent} from './cms';
 
 type Props = {
-  params: {
+  params: Promise<{
     locale: string;
     slug: Array<string>;
-  };
+  }>;
 };
 
 export default async function CatchAllPage({params}: Props) {
-  const content = await fetchContent(params.locale, params.slug);
+  const {locale, slug} = await params;
+  const content = await fetchContent(locale, slug);
   if (!content) notFound();
 
   // ...

docs/tsconfig.json

@@ -19,7 +19,8 @@
         "name": "next"
       }
     ],
-    "strict": true
+    "strict": true,
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

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

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

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

@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^14.2.4",
+    "next": "^15.0.0",
     "next-intl": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

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

@@ -4,17 +4,19 @@ import {routing} from '@/i18n/routing';
 
 type Props = {
   children: ReactNode;
-  params: {locale: string};
+  params: Promise<{locale: string}>;
 };
 
 export default async function LocaleLayout({children, params}: Props) {
+  const {locale} = await params;
+
   // Ensure that the incoming `locale` is valid
-  if (!routing.locales.includes(params.locale as any)) {
+  if (!routing.locales.includes(locale as any)) {
     notFound();
   }
 
   return (
-    <html lang={params.locale}>
+    <html lang={locale}>
       <head>
         <title>next-intl</title>
       </head>

examples/example-app-router-mixed-routing/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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/example-app-router-mixed-routing/package.json

@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^14.2.4",
+    "next": "^15.0.0",
     "next-intl": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/example-app-router-mixed-routing/src/app/(public)/[locale]/about/page.tsx

@@ -1,12 +1,15 @@
 import {useTranslations} from 'next-intl';
 import {setRequestLocale} from 'next-intl/server';
+import {use} from 'react';
 import PageTitle from '@/components/PageTitle';
 
 type Props = {
-  params: {locale: string};
+  params: Promise<{locale: string}>;
 };
 
-export default function About({params: {locale}}: Props) {
+export default function About({params}: Props) {
+  const {locale} = use(params);
+
   // Enable static rendering
   setRequestLocale(locale);
 

examples/example-app-router-mixed-routing/src/app/(public)/[locale]/layout.tsx

@@ -10,7 +10,7 @@ import PublicNavigationLocaleSwitcher from './PublicNavigationLocaleSwitcher';
 
 type Props = {
   children: ReactNode;
-  params: {locale: string};
+  params: Promise<{locale: string}>;
 };
 
 export function generateStaticParams() {
@@ -21,10 +21,9 @@ export const metadata: Metadata = {
   title: 'next-intl-mixed-routing (public)'
 };
 
-export default async function LocaleLayout({
-  children,
-  params: {locale}
-}: Props) {
+export default async function LocaleLayout({children, params}: Props) {
+  const {locale} = await params;
+
   // Enable static rendering
   setRequestLocale(locale);
 

examples/example-app-router-mixed-routing/src/app/(public)/[locale]/page.tsx

@@ -1,12 +1,15 @@
 import {useTranslations} from 'next-intl';
 import {setRequestLocale} from 'next-intl/server';
+import {use} from 'react';
 import PageTitle from '@/components/PageTitle';
 
 type Props = {
-  params: {locale: string};
+  params: Promise<{locale: string}>;
 };
 
-export default function Index({params: {locale}}: Props) {
+export default function Index({params}: Props) {
+  const {locale} = use(params);
+
   // Enable static rendering
   setRequestLocale(locale);
 

examples/example-app-router-mixed-routing/src/db.ts

@@ -9,9 +9,9 @@ import {defaultLocale} from './config';
 const COOKIE_NAME = 'NEXT_LOCALE';
 
 export async function getUserLocale() {
-  return cookies().get(COOKIE_NAME)?.value || defaultLocale;
+  return (await cookies()).get(COOKIE_NAME)?.value || defaultLocale;
 }
 
 export async function setUserLocale(locale: string) {
-  cookies().set(COOKIE_NAME, locale);
+  (await cookies()).set(COOKIE_NAME, locale);
 }

examples/example-app-router-next-auth/package.json

@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^14.2.4",
+    "next": "^15.0.0",
     "next-auth": "^4.24.7",
     "next-intl": "^3.0.0",
     "react": "^18.3.1",

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

@@ -6,13 +6,12 @@ import {routing} from '@/i18n/routing';
 
 type Props = {
   children: ReactNode;
-  params: {locale: string};
+  params: Promise<{locale: string}>;
 };
 
-export default async function LocaleLayout({
-  children,
-  params: {locale}
-}: Props) {
+export default async function LocaleLayout({children, params}: Props) {
+  const {locale} = await params;
+
   // Ensure that the incoming `locale` is valid
   if (!routing.locales.includes(locale as any)) {
     notFound();

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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

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

@@ -1,24 +1,18 @@
 // @ts-check
 
-import mdxPlugin from '@next/mdx';
+import createMDX from '@next/mdx';
 import createNextIntlPlugin from 'next-intl/plugin';
 
 const withNextIntl = createNextIntlPlugin('./src/i18n/request.tsx');
-const withMdx = mdxPlugin();
+const withMdx = createMDX({});
 
-export default withMdx(
-  withNextIntl({
-    trailingSlash: process.env.NEXT_PUBLIC_USE_CASE === 'trailing-slash',
-    basePath:
-      process.env.NEXT_PUBLIC_USE_CASE === 'base-path'
-        ? '/base/path'
-        : undefined,
-    experimental: {
-      staleTimes: {
-        // Next.js 14.2 broke `locale-prefix-never.spec.ts`.
-        // This is a workaround for the time being.
-        dynamic: 0
-      }
-    }
-  })
-);
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Configure `pageExtensions` to include markdown and MDX files
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  trailingSlash: process.env.NEXT_PUBLIC_USE_CASE === 'trailing-slash',
+  basePath:
+    process.env.NEXT_PUBLIC_USE_CASE === 'base-path' ? '/base/path' : undefined
+};
+
+export default withNextIntl(withMdx(nextConfig));

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

@@ -12,11 +12,10 @@
     "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "@mdx-js/react": "^3.0.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "lodash": "^4.17.21",
     "ms": "2.1.3",
-    "next": "^14.2.4",
+    "next": "^15.0.0",
     "next-intl": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -25,7 +24,8 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@mdx-js/loader": "^3.0.1",
-    "@next/mdx": "^14.2.5",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^15.0.0-rc.1",
     "@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,10 +1,11 @@
 type Props = {
-  params: {
+  params: Promise<{
     locale: string;
-  };
+  }>;
 };
 
-export default async function AboutPage({params}: Props) {
+export default async function AboutPage(props: Props) {
+  const params = await props.params;
   const Content = (await import(`./${params.locale}.mdx`)).default;
   return <Content />;
 }

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

@@ -2,12 +2,15 @@ import {NextRequest, NextResponse} from 'next/server';
 import {getTranslations} from 'next-intl/server';
 
 type Props = {
-  params: {
+  params: Promise<{
     locale: string;
-  };
+  }>;
 };
 
-export async function GET(request: NextRequest, {params: {locale}}: Props) {
+export async function GET(request: NextRequest, props: Props) {
+  const params = await props.params;
+  const {locale} = params;
+
   const name = request.nextUrl.searchParams.get('name');
   if (!name) {
     return new Response('Search param `name` was not provided.', {status: 400});