Type 'Props' does not satisfy the constraint 'PageProps' (generateMetadata)

[Dannymx]

Link to the code that reproduces this issue

https://github.com/Dannymx/shockinglemon.com/tree/develop

To Reproduce

• Clone
• run command 'check-types'
• Will error in any file that has generateMetadata with Props

Current vs. Expected behavior

Fails at validating types in generateMetadata methods.

Provide environment information

❯ npx --no-install next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:25 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.10.0
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: 15.0.1
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

TypeScript

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Only fails in my dynamic pages that generate Metadata info.

.next/types/app/band/[slug]/page.ts:34:29 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

34 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/band/[slug]/page.ts:38:31 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

38   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/blog/[slug]/page.ts:34:29 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

34 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/blog/[slug]/page.ts:38:31 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

38   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/music/[title]/page.ts:34:29 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ title: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

34 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

.next/types/app/music/[title]/page.ts:38:31 - error TS2344: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ title: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

38   checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()

[samcx]

This is part of the breaking changes that came with v15.

• https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
• https://nextjs.org/blog/next-15#async-request-apis-breaking-change

[derekc00]

Thank u so much :)

[1Kunalvats9]

thanks a lot broooo

[victorex27]

This helped me a lot. Thanks

[yassinl]

thanks but why did they ship something knowing its gonna break all of our codebases ? are they cruel ? is this a conspiracy to keep developers with work to do ?

[patrickaigbogun]

@yassinl i completely relate with and support your frustration.. i feel this should be something that should be introduced within version 14 of nextjs first

[ignatiosdev]

I fixed it by converting params to a Promise

For example before i did this

export default async function RootLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: {locale: string as "es" | "en"};
}) {
  const { locale } = await params; 

Now I do this

type Params = Promise<{locale: "en" | "es" }>;

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

[mohsinparvi]

Here’s how I fix this issse:

import Link from "next/link";
import photos, { Photo } from "@/lib/";
import PhotoCard from "@/components/photo-card";
export const generateStaticParams = () => {
  return photos.map(({ id }) => ({
    id: String(id),
  }));
};
export type paramsType = Promise<{ id: string }>;

export default async function PhotoPage(props: { params: paramsType }) {
  const { id } = await props.params;
  const photo: Photo | undefined = photos.find((p) => p.id === id);

  if (!photo) {
    return <div>Photo not found</div>;
  }

  return (
    <section className="py-24">
      <div className="container">
        <div>
          <Link
            href="/photos"
            className="font-semibold italic text-sky-600 underline"
          >
            Back to photos
          </Link>
        </div>
        <div className="mt-10 w-1/3">
          <PhotoCard photo={photo} />
        </div>
      </div>
    </section>
  );
}

[nxtrs2]

export default async function ArticlePage(props: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await props.params;
  const article = await getArticle(id);

so what am I doing wrong? The error won't go away for me.

[IdrisKulubi]

npx @next/codemod@canary next-async-request-api . this will auto update according to the new nextjs 14+

[69killian]

import { format } from 'date-fns';
import prismadb from '@/prisma/prismadb';
import { BillboardClient } from './components/client';
import { BillboardColumn } from './components/columns';

// Définition du type pour params comme une promesse
type Params = Promise<{ storeId: string }>;

// Composant avec params comme Promise
const BillboardsPage = async ({ params }: { params: Params }) => {
// Attente de la résolution de params
const { storeId } = await params;

// Récupération des billboards depuis la base de données
const billboards = await prismadb.billboard.findMany({
    where: {
        storeId, // Utilisation de storeId après sa résolution
    },
    orderBy: {
        createdAt: "desc", // Tri par date de création décroissante
    },
});

// Transformation des données pour correspondre au type BillboardColumn
const formattedBillboards: BillboardColumn[] = billboards.map((item) => ({
    id: item.id,
    label: item.label,
    createdAt: format(item.createdAt, "MMMM do, yyyy"), // Formatage de la date
}));

return (
    <div className="flex-col">
        <div className="flex-1 space-y-4 p-8 pt-6">
            {/* Passer les données formatées au composant BillboardClient */}
            <BillboardClient data={formattedBillboards} />
        </div>
    </div>
);

};

export default BillboardsPage;
I also tried, but nothing works for me

[frankiefab100]

Here’s how I fix this issue:

Previously it looked like this:

export default async function Page({
  params,
}: {
  params: { slug: string };
}) {
  const slug = params.slug;
  const response = await getProjectBySlug(slug);

Then, I changed it to:

export default async function Page(props: {
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;
  const response = await getProjectBySlug(params.slug);

[Tai-DT]

Đây là cách tôi khắc phục sự cố này:

Trước đây nó trông như thế này:

export default async function Page({
  params,
}: {
  params: { slug: string };
}) {
  const slug = params.slug;
  const response = await getProjectBySlug(slug);

Sau đó, tôi đã đổi nó thành:

export default async function Page(props: {
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;
  const response = await getProjectBySlug(params.slug);

tôi đã thử cách anh và đã thành công cảm ơn anh nhiều

[ped4enko]

Thank you, it helped me with the thenudeme.com project

[rodrigobutta]

Theres a script that fixes the Params breaking chamnge in the project, the easiest solution:

First commit an leade stage clean, then run npx @next/codemod@canary next-async-request-api .

Refer to: https://nextjs.org/blog/next-15#async-request-apis-breaking-change

[puneethVarma001]

import ProductListing from "../../components/product-listing";
import { GET_SEARCH_DETAILS } from "../../utils/constants";
interface SearchParams {
page?: string;
count?: string;
}
export default async function PLP({ params, searchParams }: Readonly<{ children: React.ReactNode; params: Promise<{ id: number }>, searchParams: SearchParams }>) {
const { id } = await params;

const currentPage = searchParams.page ? parseInt(searchParams.page) - 1 : 0;
const count = searchParams.count ? parseInt(searchParams.count) : 9;

const fetchCategoryDetails = async (id: number) => {
try {
const response = await fetch(
https://platform.cutiskart.com/catalog/brand/${id},
{
method: "GET",
headers: {
"Content-Type": "application/json",
deviceType: "WEB",
Authorization: "Basic Z2Vla3Nfb2ZfYWRoYXJ2YXNvZnQ=",
},
// cache: "no-store",
}
);
console.log("response", response);

  if (!response.ok) return { data: { brandList: [] } };
  return await response.json();
} catch (error) {
  console.error("Error fetching banners:", error);
  return { data: { brandList: [] } };
}

};

const getPlp = async (id: number, currentPage: number, count: number) => {
try {
const response = await fetch(
https://platform.cutiskart.com/${GET_SEARCH_DETAILS}?type=2&brandId=${id}&page=${currentPage}&count=${count}&filters=true,
{
method: "GET",
headers: {
"Content-Type": "application/json",
deviceType: "WEB",
Authorization: "Basic Z2Vla3Nfb2ZfYWRoYXJ2YXNvZnQ=",
},
}
);

  if (!response.ok) return { data: { products: [] } };
  return await response.json();
} catch (error) {
  console.error("Error fetching banners:", error);
  return { data: { products: [] } };
}

};

const breadcrumbData = await fetchCategoryDetails(id);
const productData = await getPlp(id, currentPage, count);

return (

<div>
  <ProductListing
    breadcrumbData={breadcrumbData?.data}
    productData={productData}
    currentPage={currentPage}
    count={count}
    isCategory={false}
  />
</div>

)
}

while building it is showing an error given below
app/brand/[id]/page.tsx
Type error: Type 'PageProps' does not satisfy the constraint 'import("/home/tharun/Desktop/cutiskart-new/.next/types/app/brand/[id]/page").PageProps'.
Types of property 'params' are incompatible.
Type '{ id: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

Next.js build worker exited with code: 1 and signal: null

[Vic-Orlands]

Shit sucks fr!! but this fixed it for me:

type paramsType = Promise<{ slug: string }>;

export async function generateMetadata({
params,
}: { params: paramsType; ): Promise {
const { slug } = await params;
const post = await getBlogPost(slug);

....other codes here

[mundane799699]

I'm using next.js 15.2.0. I solved the problem like this:

interface ChatIdPageProps {
  // use promise
  params: Promise<{ chatId: string }>;
}

const ChatIdPage = async ({ params }: ChatIdPageProps) => {
  const { userId } = await auth();
  if (!userId) {
    return <RedirectToSignIn />;
  }

  // get the chatId from promise
  const { chatId } = await params;
  const companion = await prismadb.companion.findUnique({
    where: {
      id: chatId,
    },
......

[SouleymaneSy7]

Thanks you so much. This fixed the issue for me

[winayaid]

Thank you this is work for me

[freddy24-7]

This worked for me:
const locales = ['en', 'nl', 'tr', 'ar'];

// Define props so that params is always a Promise.
type Props = {
children: ReactNode;
params: Promise<{ locale: string }>;
};

export default async function LocaleLayout({ children, params }: Props) {
// Await params, which is now guaranteed to be a Promise.
const { locale } = await params;

if (!locales.includes(locale)) {
notFound();
}

[yaolifeng0629]

Regarding this issue, the official has provided me with a solution:

Official document: https://nextjs.org/docs/messages/sync-dynamic-apis

Post: https://x.com/Immerse_code/status/1910898542815961248

[ttttttomas]

import { Metadata } from 'next';

type Props = {
params: {
periodo: string;
id: string;
};
};

export async function generateStaticParams({ params }: { params: Props }): Promise {
return {title: ${params.params.periodo} - ${params.params.id}}
}

export default async function ProductPage(props: { params: Props }) {
const { params } = props.params;
const response = await fetch({apiURL}/products/${params.id}); //apiURL IS PRIVATE
const currentProduct = await response.json();

why do i get this error? :

[patrickaigbogun]

@ttttttomas you have to set the correct interface, then destruct it within your code
Here's an image example