next.js

Next.js 15 with Dynamic Routes


In my Next.js 14 app I have this route and page and it works perfectly:

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

I can access the id and slug (O don't 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 Next.js 15 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<any>': 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;