docs: Update docs and examples to Next.js 15

docs/src/components/CodeSnippets.tsx

@@ -293,23 +293,23 @@ function buildOutput() {
       <span className="line">
         <span data-token="text">┌ ● /</span>
         <span data-token="text"> </span>
-        <span data-token="text">{'           '}2.1 kB</span>
+        <span data-token="text">{'           '}2.5 kB</span>
         <span data-token="text">{'     '}</span>
-        <span data-token="string">97.1 kB</span>
+        <span data-token="string">115 kB</span>
       </span>
       <span className="line">
         <span data-token="text">├ ● /about</span>
         <span data-token="text">{'       '}</span>
-        <span data-token="text">2.5 kB</span>
+        <span data-token="text">2.6 kB</span>
         <span data-token="text">{'     '}</span>
-        <span data-token="string">97.6 kB</span>
+        <span data-token="string">116 kB</span>
       </span>
       <span className="line">
         <span data-token="text">└ λ /[username]</span>
         <span data-token="text">{'  '}</span>
         <span data-token="text">3.2 kB</span>
         <span data-token="text">{'     '}</span>
-        <span data-token="string">98.3 kB</span>
+        <span data-token="string">117 kB</span>
       </span>
       <span className="line"> </span>
       <span className="line">

docs/src/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 {
@@ -113,7 +114,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/src/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/src/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/src/pages/docs/getting-started/app-router/with-i18n-routing.mdx

@@ -24,18 +24,19 @@ Now, we're going to create the following file structure:
 
 ```
 ├── messages
-│   ├── en.json (1)
+│   ├── en.json
 │   └── ...
-├── next.config.mjs (2)
+├── next.config.ts
 └── src
     ├── i18n
-    │   ├── routing.ts (3)
-    │   └── request.ts (5)
-    ├── middleware.ts (4)
+    │   ├── routing.ts
+    │   ├── navigation.ts
+    │   └── request.ts
+    ├── middleware.ts
     └── app
         └── [locale]
-            ├── layout.tsx (6)
-            └── page.tsx (7)
+            ├── layout.tsx
+            └── page.tsx
 ```
 
 In case you're migrating an existing app to `next-intl`, you'll typically move your existing pages into the `[locale]` folder as part of the setup.
@@ -59,21 +60,20 @@ The simplest option is to add JSON files in your local project folder:
 }
 ```
 
-### `next.config.mjs` [#next-config]
+### `next.config.ts` [#next-config]
 
 Now, set up the plugin which creates an alias to provide a request-specific i18n configuration to Server Components—more on this in the following steps.
 
-<Tabs items={['next.config.mjs', 'next.config.js']}>
+<Tabs items={['next.config.ts', 'next.config.js']}>
 <Tabs.Tab>
 
-```js filename="next.config.mjs"
+```js filename="next.config.ts"
+import {NextConfig} from 'next';
 import createNextIntlPlugin from 'next-intl/plugin';
 
-const withNextIntl = createNextIntlPlugin();
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig: NextConfig = {};
 
+const withNextIntl = createNextIntlPlugin();
 export default withNextIntl(nextConfig);
 ```
 
@@ -116,18 +116,25 @@ export const routing = defineRouting({
   // Used when no locale matches
   defaultLocale: 'en'
 });
+```
+
+Depending on your requirements, you may wish to customize your routing configuration later—but let's finish with the setup first.
+
+### `src/i18n/navigation.ts` [#i18n-navigation]
+
+Once we have our routing configuration in place, we can use it to set up the navigation APIs.
+
+```ts filename="src/i18n/navigation.ts"
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing';
 
-// Lightweight wrappers around Next.js' navigation APIs
-// that will consider the routing configuration
 export const {Link, redirect, usePathname, useRouter, getPathname} =
   createNavigation(routing);
 ```
 
-Depending on your requirements, you may wish to customize your routing configuration later—but let's finish with the setup first.
-
 ### `src/middleware.ts` [#middleware]
 
-Once we have our routing configuration in place, we can use it to set up the middleware.
+Additionally, we can use our routing configuration to set up the middleware.
 
 ```tsx filename="src/middleware.ts"
 import createMiddleware from 'next-intl/middleware';
@@ -172,7 +179,7 @@ This file is supported out-of-the-box as `./i18n/request.ts` both in the `src` f
 
 If you prefer to move this file somewhere else, you can optionally provide a path to the plugin:
 
-```js filename="next.config.mjs"
+```js filename="next.config.ts"
 const withNextIntl = createNextIntlPlugin(
   // Specify a custom path here
   './somewhere/else/request.ts'
@@ -193,12 +200,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 +308,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 +328,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);
 
@@ -369,7 +381,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/src/pages/docs/getting-started/app-router/without-i18n-routing.mdx

@@ -24,15 +24,15 @@ Now, we're going to create the following file structure:
 
 ```
 ├── messages
-│   ├── en.json (1)
+│   ├── en.json
 │   └── ...
-├── next.config.mjs (2)
+├── next.config.ts
 └── src
     ├── i18n
-    │   └── request.ts (3)
+    │   └── request.ts
     └── app
-        ├── layout.tsx (4)
-        └── page.tsx (5)
+        ├── layout.tsx
+        └── page.tsx
 ```
 
 **Let's set up the files:**
@@ -53,21 +53,20 @@ The simplest option is to add JSON files in your local project folder:
 }
 ```
 
-### `next.config.mjs` [#next-config]
+### `next.config.ts` [#next-config]
 
 Now, set up the plugin which creates an alias to provide a request-specific i18n configuration to Server Components (specified in the next step).
 
-<Tabs items={['next.config.mjs', 'next.config.js']}>
+<Tabs items={['next.config.ts', 'next.config.js']}>
 <Tabs.Tab>
 
-```js filename="next.config.mjs"
+```js filename="next.config.ts"
+import {NextConfig} from 'next';
 import createNextIntlPlugin from 'next-intl/plugin';
 
-const withNextIntl = createNextIntlPlugin();
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig: NextConfig = {};
 
+const withNextIntl = createNextIntlPlugin();
 export default withNextIntl(nextConfig);
 ```
 
@@ -114,7 +113,7 @@ This file is supported out-of-the-box as `./i18n/request.ts` both in the `src` f
 
 If you prefer to move this file somewhere else, you can optionally provide a path to the plugin:
 
-```js filename="next.config.mjs"
+```js filename="next.config.ts"
 const withNextIntl = createNextIntlPlugin(
   // Specify a custom path here
   './somewhere/else/request.ts'

docs/src/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();
 
   // ...