amannn · amannn · May 13, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/examples/example-app-router-extracted/src/i18n/request.ts b/examples/example-app-router-extracted/src/i18n/request.ts
@@ -1,9 +1,9 @@
 import {getRequestConfig} from 'next-intl/server';
 import {cookies} from 'next/headers';
 
-export default getRequestConfig(async (params) => {
+export default getRequestConfig(async () => {
   const store = await cookies();
-  const locale = params.locale || store.get('locale')?.value || 'en';
+  const locale = store.get('locale')?.value || 'en';
   const messages = (await import(`../../messages/${locale}.po`)).default;
 
   return {

diff --git a/examples/example-app-router-migration/next-env.d.ts b/examples/example-app-router-migration/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import './.next/types/routes.d.ts';
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/example-app-router-migration/next.config.ts b/examples/example-app-router-migration/next.config.ts
@@ -4,6 +4,9 @@ import createNextIntlPlugin from 'next-intl/plugin';
 const withNextIntl = createNextIntlPlugin();
 
 const config: NextConfig = {
+  experimental: {
+    rootParams: true
+  },
   // https://github.com/amannn/next-intl/issues/2121
   transpilePackages: ['next-intl']
 };

diff --git a/examples/example-app-router-migration/src/app/[locale]/layout.tsx b/examples/example-app-router-migration/src/app/[locale]/layout.tsx
@@ -1,19 +1,10 @@
-import {notFound} from 'next/navigation';
-import {NextIntlClientProvider, hasLocale} from 'next-intl';
-import {ReactNode} from 'react';
-import {routing} from '@/i18n/routing';
+import {NextIntlClientProvider} from 'next-intl';
+import {getLocale} from 'next-intl/server';
 
-type Props = {
-  children: ReactNode;
-  params: Promise<{locale: string}>;
-};
-
-export default async function LocaleLayout({children, params}: Props) {
-  // Ensure that the incoming `locale` is valid
-  const {locale} = await params;
-  if (!hasLocale(routing.locales, locale)) {
-    notFound();
-  }
+export default async function LocaleLayout({
+  children
+}: LayoutProps<'/[locale]'>) {
+  const locale = await getLocale();
 
   return (
     <html lang={locale}>

diff --git a/examples/example-app-router-migration/src/app/layout.tsx b/examples/example-app-router-migration/src/app/layout.tsx
diff --git a/examples/example-app-router-migration/src/i18n/request.ts b/examples/example-app-router-migration/src/i18n/request.ts
@@ -1,13 +1,18 @@
 import {hasLocale} from 'next-intl';
 import {getRequestConfig} from 'next-intl/server';
 import {routing} from './routing';
+import {notFound} from 'next/navigation';
+import * as rootParams from 'next/root-params';
 
-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 paramValue = await rootParams.locale();
+    if (hasLocale(routing.locales, paramValue)) {
+      locale = paramValue;
+    } else {
+      notFound();
+    }
+  }
 
   return {
     locale,

diff --git a/examples/example-app-router-playground/next.config.mjs b/examples/example-app-router-playground/next.config.mjs
@@ -18,7 +18,10 @@ const nextConfig = {
   trailingSlash: process.env.NEXT_PUBLIC_USE_CASE === 'trailing-slash',
   basePath:
     process.env.NEXT_PUBLIC_USE_CASE === 'base-path' ? '/base/path' : undefined,
-  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx']
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  experimental: {
+    rootParams: true
+  }
 };
 
 export default withNextIntl(withMdx(withBundleAnalyzer(nextConfig)));
diff --git a/examples/example-app-router-playground/src/app/[locale]/about/page.tsx b/examples/example-app-router-playground/src/app/[locale]/about/page.tsx
@@ -1,7 +1,7 @@
-export default async function AboutPage({
-  params
-}: PageProps<'/[locale]/about'>) {
-  const {locale} = await params;
+import {getLocale} from 'next-intl/server';
+
+export default async function AboutPage() {
+  const locale = await getLocale();
   const Content = (await import(`./${locale}.mdx`)).default;
   return <Content />;
 }
diff --git a/examples/example-app-router-playground/src/app/[locale]/actions/ListItem.tsx b/examples/example-app-router-playground/src/app/[locale]/actions/ListItem.tsx
diff --git a/examples/example-app-router-playground/src/app/[locale]/actions/ListItemAsync.tsx b/examples/example-app-router-playground/src/app/[locale]/actions/ListItemAsync.tsx
@@ -1,6 +1,13 @@
+import {Locale} from 'next-intl';
 import {getTranslations} from 'next-intl/server';
 
-export default async function ListItemAsync({id}: {id: number}) {
-  const t = await getTranslations('ServerActions');
+export default async function ListItemAsync({
+  id,
+  locale
+}: {
+  id: number;
+  locale: Locale;
+}) {
+  const t = await getTranslations({namespace: 'ServerActions', locale});
   return t('item', {id: String(id)});
 }
diff --git a/examples/example-app-router-playground/src/app/[locale]/actions/ZodFormExample.tsx b/examples/example-app-router-playground/src/app/[locale]/actions/ZodFormExample.tsx
@@ -1,4 +1,4 @@
-import {useTranslations} from 'next-intl';
+import {Locale, useLocale, useTranslations} from 'next-intl';
 import {getTranslations} from 'next-intl/server';
 import {z} from 'zod';
 import ZodForm from './ZodForm';
@@ -22,13 +22,14 @@ export type FormResult =
     };
 
 async function submitAction(
+  locale: Locale,
   prev: unknown,
   data: FormData
 ): Promise<FormResult> {
   'use server';
 
   const values = Object.fromEntries(data.entries());
-  const t = await getTranslations('ZodFormExample');
+  const t = await getTranslations({namespace: 'ZodFormExample', locale});
 
   const result = FormSchema.safeParse(values, {
     error(issue) {
@@ -52,11 +53,12 @@ async function submitAction(
 
 export default function ZodFormExample() {
   const t = useTranslations('ZodFormExample');
+  const locale = useLocale();
 
   return (
     <section>
       <h2>Zod form</h2>
-      <ZodForm action={submitAction}>
+      <ZodForm action={submitAction.bind(null, locale)}>
         <input name="task" placeholder={t('task')} type="text" />
       </ZodForm>
     </section>

diff --git a/examples/example-app-router-playground/src/app/[locale]/actions/page.tsx b/examples/example-app-router-playground/src/app/[locale]/actions/page.tsx
@@ -1,28 +1,21 @@
 import {pick} from 'lodash';
-import {NextIntlClientProvider, useMessages} from 'next-intl';
+import {NextIntlClientProvider, useLocale, useMessages} from 'next-intl';
 import List from './List';
-import ListItem from './ListItem';
 import ListItemAsync from './ListItemAsync';
 import ListItemClient from './ListItemClient';
 import ZodFormExample from './ZodFormExample';
 
 export default function ServerActions() {
+  const locale = useLocale();
+
   return (
     <>
       <ZodFormExample />
       <List
         getNextItem={async (curLength: number) => {
           'use server';
           const id = curLength + 1;
-          return <ListItem id={id} />;
-        }}
-        title="Shared Server Components"
-      />
-      <List
-        getNextItem={async (curLength: number) => {
-          'use server';
-          const id = curLength + 1;
-          return <ListItemAsync id={id} />;
+          return <ListItemAsync locale={locale} id={id} />;
         }}
         title="Async Server Components"
       />

diff --git a/examples/example-app-router-playground/src/app/[locale]/layout.tsx b/examples/example-app-router-playground/src/app/[locale]/layout.tsx
@@ -1,28 +1,22 @@
 import {Metadata} from 'next';
 import {Inter} from 'next/font/google';
-import {notFound} from 'next/navigation';
-import {Locale, NextIntlClientProvider, hasLocale} from 'next-intl';
+import {NextIntlClientProvider} from 'next-intl';
 import {
   getFormatter,
+  getLocale,
   getNow,
   getTimeZone,
   getTranslations
 } from 'next-intl/server';
-import {routing} from '@/i18n/routing';
 import Navigation from '../../components/Navigation';
 
 const inter = Inter({subsets: ['latin']});
 
-export async function generateMetadata(
-  props: Omit<LayoutProps<'/[locale]'>, 'children'>
-): Promise<Metadata> {
-  const params = await props.params;
-  const locale = params.locale as Locale;
-
-  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();
 
   const base = new URL('http://localhost:3000');
   if (process.env.NEXT_PUBLIC_USE_CASE === 'base-path') {
@@ -41,15 +35,9 @@ export async function generateMetadata(
 }
 
 export default async function LocaleLayout({
-  children,
-  params
+  children
 }: LayoutProps<'/[locale]'>) {
-  const {locale} = await params;
-
-  // Ensure that the incoming `locale` is valid
-  if (!hasLocale(routing.locales, locale)) {
-    notFound();
-  }
+  const locale = await getLocale();
 
   return (
     <html className={inter.className} lang={locale}>

diff --git a/examples/example-app-router-playground/src/app/[locale]/news/[articleId]/page.tsx b/examples/example-app-router-playground/src/app/[locale]/news/[articleId]/page.tsx
@@ -1,12 +1,14 @@
 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/navigation';
 
 export async function generateMetadata({
   params
 }: PageProps<'/[locale]/news/[articleId]'>): Promise<Metadata> {
-  const {locale, articleId} = await params;
+  const {articleId} = await params;
+  const locale = await getLocale();
 
   return {
     alternates: {
@@ -15,7 +17,7 @@ export async function generateMetadata({
           pathname: '/news/[articleId]',
           params: {articleId}
         },
-        locale: locale as Locale
+        locale
       })
     }
   };

diff --git a/examples/example-app-router-playground/src/app/[locale]/opengraph-image.tsx b/examples/example-app-router-playground/src/app/[locale]/opengraph-image.tsx
@@ -2,13 +2,15 @@ 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({
+  params
+}: {
+  params: Promise<{locale: string}>;
+}) {
+  const {locale} = await params;
+  const t = await getTranslations({
+    namespace: 'OpenGraph',
+    locale: locale as Locale
+  });
   return new ImageResponse(<div style={{fontSize: 128}}>{t('title')}</div>);
 }
diff --git a/examples/example-app-router-playground/src/app/layout.tsx b/examples/example-app-router-playground/src/app/layout.tsx
diff --git a/examples/example-app-router-playground/src/i18n/request.tsx b/examples/example-app-router-playground/src/i18n/request.tsx
@@ -1,6 +1,8 @@
 import {headers} from 'next/headers';
 import {Formats, hasLocale, IntlErrorCode} from 'next-intl';
 import {getRequestConfig} from 'next-intl/server';
+import {notFound} from 'next/navigation';
+import * as rootParams from 'next/root-params';
 import defaultMessages from '../../messages/en.json';
 import {routing} from './routing';
 
@@ -30,12 +32,15 @@ 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 paramValue = await rootParams.locale();
+    if (hasLocale(routing.locales, paramValue)) {
+      locale = paramValue;
+    } else {
+      notFound();
+    }
+  }
 
   const now = (await headers()).get('x-now');
   const timeZone = (await headers()).get('x-time-zone') ?? 'Europe/Vienna';

diff --git a/examples/example-app-router-without-i18n-routing/src/i18n/request.ts b/examples/example-app-router-without-i18n-routing/src/i18n/request.ts
@@ -1,9 +1,9 @@
 import {getRequestConfig} from 'next-intl/server';
 import {cookies} from 'next/headers';
 
-export default getRequestConfig(async (params) => {
+export default getRequestConfig(async () => {
   const store = await cookies();
-  const locale = params.locale || store.get('locale')?.value || 'en';
+  const locale = store.get('locale')?.value || 'en';
   const messages = (await import(`../../messages/${locale}.json`)).default;
 
   return {

diff --git a/examples/example-app-router/next.config.ts b/examples/example-app-router/next.config.ts
@@ -7,6 +7,10 @@ const withNextIntl = createNextIntlPlugin({
   }
 });
 
-const config: NextConfig = {};
+const config: NextConfig = {
+  experimental: {
+    rootParams: true
+  }
+};
 
 export default withNextIntl(config);
diff --git a/...es/example-app-router/src/app/globals.css → ...e-app-router/src/app/[locale]/globals.css b/...es/example-app-router/src/app/globals.css → ...e-app-router/src/app/[locale]/globals.css