New layout.tsx after Nextjs 15 update #1502

luiscaceresd · 2024-11-01T17:46:02Z

luiscaceresd
Nov 1, 2024

Hi guys, I'm having a difficult time upgrading to nextjs 15. I already implemented the suggested changes here: https://next-intl-docs.vercel.app/blog/next-intl-3-22#await-request-locale
But I'm still getting this error:

Error: Route "/[locale]" used params.locale. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at createParamsAccessError (turbopack://[project]/node_modules/next/dist/src/server/request/params.ts:467:9) at getMessage (turbopack://[project]/node_modules/next/dist/src/server/create-deduped-by-callsite-server-error-logger.ts:46:20) at warnForSyncAccess (turbopack://[project]/node_modules/next/dist/src/server/request/params.ts:445:4) at syncIODev (turbopack://[project]/node_modules/next/dist/src/server/request/params.ts:403:10) at param (turbopack://[project]/node_modules/next/src/server/server-utils.ts:74:25) at pathname (turbopack://[project]/node_modules/next/src/lib/metadata/get-metadata-route.ts:40:39) at tree.children.metadata.openGraph (/home/kira/02-WORK/00-lezgo/lezgo/.next/server/chunks/ssr/node_modules_cf91f8._.js:114:241) at imageModule (turbopack://[project]/node_modules/next/dist/src/lib/metadata/resolve-metadata.ts:381:27) at Array.map (<anonymous>) at map (turbopack://[project]/node_modules/next/dist/src/lib/metadata/resolve-metadata.ts:379:58) at collectStaticImagesFiles (turbopack://[project]/node_modules/next/dist/src/lib/metadata/resolve-metadata.ts:399:4) at resolveStaticMetadata (turbopack://[project]/node_modules/next/dist/src/lib/metadata/resolve-metadata.ts:449:36) at async resolveMetadataItemsImpl (turbopack://[project]/node_modules/next/dist/src/lib/metadata/resolve-metadata.ts:548:2) at async resolveMetadataItemsImpl (turbopack://[project]/node_modules/next/dist/src/lib/metadata/resolve-metadata.ts:562:4)

I ran the nextjs 15 codemod and it updated my layout to this:

import Header from "@/components/navbar/Header";
import { cn } from '@/lib/utils';
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import { Inter } from 'next/font/google';
import "./globals.css";
import { Providers } from "./providers";
import Footer from "./Footer";
import Script from "next/script";
import { GoogleTagManager } from '@next/third-parties/google'
import localfont from "next/font/local"
import { getTenants } from "@/utils/prisma/getTenants";
import { CSPostHogProvider } from "./_providers/CSPosstHogProvider";
import { routing } from "@/i18n/routing";
import { ReactNode } from "react";

const fontHeading = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-heading',
})

const fontBody = localfont({
  src: [
    {
      path: "../../public/fonts/omnes/omnes-regular.ttf",
      weight: "400",
    },
    {
      path: "../../public/fonts/omnes/omnes-medium.ttf",
      weight: "500",
    },
    {
      path: "../../public/fonts/omnes/omnes-semiBold.ttf",
      weight: "600",
    },
  ],
  variable: '--font-body',
});

const lotaGrotesque = localfont({
  src: [
    {
      path: "../../public/fonts/lota-grotesque/LotaGrotesque-Regular.otf",
      weight: "400",
    },
    {
      path: "../../public/fonts/lota-grotesque/LotaGrotesque-SemiBold.otf",
      weight: "600",
    },
    {
      path: "../../public/fonts/lota-grotesque/LotaGrotesque-Bold.otf",
      weight: "700",
    },
  ],
  variable: '--font-lota',
});

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Lezgo",
  description: "The fastest way to rent cars",
};

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

  const {
    locale
  } = params;

  const {
    children
  } = props;

  const messages = await getMessages();
  const tenants = await getTenants();

  return (
    <html lang={locale} data-theme="light">
      <GoogleTagManager gtmId="GTM-NGNQ5L4W" />
      <CSPostHogProvider>
        <body className={cn(
          'antialiased',
          'overflow-x-hidden',
          fontHeading.variable,
          fontBody.variable,
          lotaGrotesque.variable,
        )}>
          <NextIntlClientProvider
            messages={messages}
            formats={{
              dateTime: {
                short: {
                  timeZone: 'UTC',
                  month: 'short',
                  day: 'numeric',
                },
                long: {
                  timeZone: 'UTC',
                  weekday: 'short',
                  month: 'short',
                  day: 'numeric',
                  year: 'numeric',
                },
              }
            }}
          >
            <Providers initialTenants={tenants}>
              <div className="min-h-screen w-screen flex flex-col overflow-hidden">
                <Header />
                <main className="min-h-[94dvh] flex flex-col items-center flex-1 w-screen gap-8 mb-20">
                  <div className="flex-1 flex flex-col items-center w-screen gap-4">
                    {children}
                  </div>
                </main>
                <Footer />
              </div>
            </Providers>
          </NextIntlClientProvider>
        </body>
      </CSPostHogProvider>
    </html>
  );
}

So I'm not sure why I'm getting this

amannn · 2024-11-02T07:00:24Z

amannn
Nov 2, 2024
Maintainer

Have you also switched to createNavigation? (See the note on Next.js 15 in the linked section)

0 replies

luiscaceresd · 2024-11-03T23:34:50Z

luiscaceresd
Nov 3, 2024
Author

Yeah, this is my routing.ts

import {defineRouting} from 'next-intl/routing';
import {createNavigation} from 'next-intl/navigation';
 
export const routing = defineRouting({
  locales: ['en', 'es', 'nl'],
  defaultLocale: 'en',
  alternateLinks: false
});

export type Locale = (typeof routing.locales)[number];

export const {Link, getPathname, redirect, usePathname, useRouter} =
  createNavigation(routing);

1 reply

amannn Nov 4, 2024
Maintainer

Hmm, can't see an issue with that. In your stack trace, there are a few mentions of "metadata". Maybe you're reading params.locale yourself somewhere and need to update that!

emirxmertoglu · 2024-11-04T19:45:13Z

emirxmertoglu
Nov 4, 2024

Try this instead,

type Params = Promise<{ locale: string }>;

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New layout.tsx after Nextjs 15 update #1502

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

New layout.tsx after Nextjs 15 update #1502

luiscaceresd Nov 1, 2024

Replies: 3 comments · 1 reply

amannn Nov 2, 2024 Maintainer

luiscaceresd Nov 3, 2024 Author

amannn Nov 4, 2024 Maintainer

emirxmertoglu Nov 4, 2024

luiscaceresd
Nov 1, 2024

Replies: 3 comments 1 reply

amannn
Nov 2, 2024
Maintainer

luiscaceresd
Nov 3, 2024
Author

amannn Nov 4, 2024
Maintainer

emirxmertoglu
Nov 4, 2024