New layout.tsx after Nextjs 15 update #1502
-
|
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
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 |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 1 reply
-
|
Have you also switched to |
Beta Was this translation helpful? Give feedback.
-
|
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); |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, can't see an issue with that. In your stack trace, there are a few mentions of "metadata". Maybe you're reading |
Beta Was this translation helpful? Give feedback.
-
|
Try this instead, type Params = Promise<{ locale: string }>;
export default async function LocaleLayout({
children,
params,
}: {
children: React.ReactNode;
params: Params;
}) {
const { locale } = await params; |
Beta Was this translation helpful? Give feedback.
-
|
Guys I was going crazy over this, the issue was this: https://stackoverflow.com/questions/79143162/route-locale-used-params-locale-params-should-be-awaited-before-using
I can finally migrate to nextjs 15 without any warnings lol |
Beta Was this translation helpful? Give feedback.
Guys I was going crazy over this, the issue was this: https://stackoverflow.com/questions/79143162/route-locale-used-params-locale-params-should-be-awaited-before-using
I can finally migrate to nextjs 15 without any warnings lol