Skip to content

Commit

Permalink
Update with-i18n-routing.mdx with nextjs 15 params future change
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ammubhave authored Oct 4, 2024
1 parent 04d7263 commit 56aa0ca
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 (
Expand All @@ -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
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 56aa0ca

Please sign in to comment.