[Docs]: Update example in LocaleLayout for Next.js 15 #1626

valentin-harrang · 2024-12-19T13:09:55Z

Link to page

https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing#layout

Describe the problem

The LocaleLayout example provided in the documentation is outdated for the latest versions of Next.js. Since Next.js 15, the params in app directory layouts are now a promise. This requires using await when destructuring params in the LocaleLayout.

Current example from the docs:

export default async function LocaleLayout({
  children,
  params: {locale}
}: {
  children: React.ReactNode;
  params: {locale: string};
}) {
  // Ensure that the incoming `locale` is valid
  if (!routing.locales.includes(locale as any)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Proposed update:

export default async function LocaleLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Promise<{locale: string}>;
}) {
  const { locale } = await params;

  // Ensure that the incoming `locale` is valid
  if (!routing.locales.includes(locale as any)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Why this change is necessary:

The current example leads to a runtime error in Next.js 15+ because params is not destructurable until resolved as a promise. This adjustment will align the documentation with the latest Next.js API changes.

The text was updated successfully, but these errors were encountered:

C-Jeril · 2024-12-20T01:35:46Z

I may have encountered the same problem, but I finally modified it like this to temporarily solve it

export async function generateMetadata(props: { params: any }): Promise<Metadata> { const { locale } = await props.params as { locale: SupportedLocale };

export default async function NPage({ params }: { params: Promise<{ locale: SupportedLocale }> }) { const { locale } = await params;

amannn · 2024-12-20T07:10:59Z

Thanks for the report! There's however already an existing one at #1587 and a PR is open to address this.

valentin-harrang added documentation Improvements or additions to documentation unconfirmed Needs triage. labels Dec 19, 2024

amannn closed this as completed Dec 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Docs]: Update example in LocaleLayout for Next.js 15 #1626

[Docs]: Update example in LocaleLayout for Next.js 15 #1626

valentin-harrang commented Dec 19, 2024

C-Jeril commented Dec 20, 2024 •

edited

Loading

amannn commented Dec 20, 2024

[Docs]: Update example in LocaleLayout for Next.js 15 #1626

[Docs]: Update example in LocaleLayout for Next.js 15 #1626

Comments

valentin-harrang commented Dec 19, 2024

Link to page

Describe the problem

C-Jeril commented Dec 20, 2024 • edited Loading

amannn commented Dec 20, 2024

C-Jeril commented Dec 20, 2024 •

edited

Loading