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

[JsemOlik]

I love you so god damn much. I was trying to figure this out for the past hour and a half 😭

[vijayluxmimaddheshiya]

Hi , I am facing same issue but nothing is working for me would it be possible for you to help me out , thanks!!

[derekc00]

Thank u so much :)

[1Kunalvats9]

thanks a lot broooo

[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