From 56aa0cab6721c9990a1744bba124b6923b73bca9 Mon Sep 17 00:00:00 2001 From: Amol Bhave Date: Fri, 4 Oct 2024 11:01:19 -0500 Subject: [PATCH] Update with-i18n-routing.mdx with nextjs 15 params future change Update app router with-i18n-routing with a nextjs 15 `params` change. In nextjs 15, the `params` property is a promise. Although direct access is still supported, it is deprecated. --- .../app-router/with-i18n-routing.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx b/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx index 1b5605f2e..0b1b3215f 100644 --- a/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx +++ b/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx @@ -186,11 +186,12 @@ import {getMessages} from 'next-intl/server'; export default async function LocaleLayout({ children, - params: {locale} + params }: { children: React.ReactNode; - params: {locale: string}; + params: Promise<{locale: string}>; }) { + const {locale} = await params; // Providing all messages to the client // side is the easiest way to get started const messages = await getMessages(); @@ -286,7 +287,8 @@ export function generateStaticParams() { ```tsx filename="app/[locale]/layout.tsx" import {unstable_setRequestLocale} from 'next-intl/server'; -export default async function LocaleLayout({children, params: {locale}}) { +export default async function LocaleLayout({children, params}) { + const {locale} = await params; unstable_setRequestLocale(locale); return ( @@ -298,7 +300,8 @@ export default async function LocaleLayout({children, params: {locale}}) { ```tsx filename="app/[locale]/page.tsx" import {unstable_setRequestLocale} from 'next-intl/server'; -export default function IndexPage({params: {locale}}) { +export default function IndexPage({params}) { + const {locale} = await params; unstable_setRequestLocale(locale); // Once the request locale is set, you @@ -359,7 +362,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 {