next.js

NextJS (15) with Dynamic Routes

In my NextJs 14 app I got this route and page and it works perfect

src\app\[id]\[[...slug]]\page.tsx

I can access the id and slug (i dont need the slug, it's just there for an SEO friendly url)

interface PageProps {
  params: { id: string; slug?: string[] };
}

const Page = async ({ params }: PageProps) => {
  const { id } = params;
  .....

Doing exactly the same in a NextJs15 app, it runs fine (npm run dev) but when I build

.next/types/app/[id]/[[...slug]]/page.ts:34:29 Type error: Type 'PageProps' does not satisfy the constraint 'import("C:/aaaa/web/aaa-01/.next/types/app/[id]/[[...slug]]/page").PageProps'. Types of property 'params' are incompatible. Type '{ id: string; slug?: string | undefined; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

32 | 33 | // Check the prop type of the entry function

34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) {

I thought let me simplify and created src\app\listing\[id]\page.tsx with the code for page

interface PageProps {
  params: { id: string };
}
 
const Page = ({ params }: PageProps) => {
  const { id } = params;

  return <div>Page for {id}</div>;
};

export default Page;

but same error (only when i build, not run..then it's fine)

Solution

  • The reason is because of a change in Nextjs 15, Dynamic APIs are Asynchronous so you would have to await the params to get the slug/id

    interface PageProps {
  params: Promise<{ id: string }>;
}

const Page = async ({ params }: PageProps) => {
  const { id } = await params;

  return <div>Page for {id}</div>;
};

export default Page;