Next.js Discord

Discord Forum

Next.js 15 - Type Error with Dynamic Routes During Vercel Deployment

Unanswered
Dylan posted this in #help-forum
Open in Discord
Hello,

I'm experiencing persistent TypeScript errors during Vercel deployment with my Next.js 15 application. We've tried multiple approaches but continue to get the same error:

## Project Details
- Next.js version: 15.2.1
- TypeScript version: [your TS version]
- Deploying on: Vercel


## Error log

Failed to compile.
src/app/admin/auctions/[id]/edit/page.tsx
Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1



## Code Example
Here's my current page component structure, which is still triggering the error:

// src/app/admin/auctions/[id]/edit/page.tsx
import { Metadata } from 'next';
import EditAuctionClient from './EditAuctionClient';

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

export default function Page(props: Props) {
  return <EditAuctionClient id={props.params.id} />;
}


## What I've Already Tried
1. Using destructured params in the function signature
2. Converting to client components with 'use client'
3. Removing the custom 'output: export' setting from next.config.js
4. Explicitly typing with a Props interface
5. Renaming the component to the standard 'Page' name
6. Using props.params pattern instead of destructuring

None of these approaches have resolved the error. The error suggests that Next.js 15 expects 'params' to be a Promise, which seems unusual.

## Question
What is the correct way to type dynamic route pages in Next.js 15 to satisfy the PageProps constraint? Is this a known issue with Next.js 15, and is there a specific workaround you'd recommend?

Thank you for your help!

4 Replies

@Dylan Hello, I'm experiencing persistent TypeScript errors during Vercel deployment with my Next.js 15 application. We've tried multiple approaches but continue to get the same error: ## Project Details - Next.js version: 15.2.1 - TypeScript version: [your TS version] - Deploying on: Vercel ## Error log Failed to compile. src/app/admin/auctions/[id]/edit/page.tsx Type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] Next.js build worker exited with code: 1 and signal: null Error: Command "npm run build" exited with 1 ## Code Example Here's my current page component structure, which is still triggering the error: typescript // src/app/admin/auctions/[id]/edit/page.tsx import { Metadata } from 'next'; import EditAuctionClient from './EditAuctionClient'; type Props = { params: { id: string }; }; export default function Page(props: Props) { return <EditAuctionClient id={props.params.id} />; } ## What I've Already Tried 1. Using destructured params in the function signature 2. Converting to client components with 'use client' 3. Removing the custom 'output: export' setting from next.config.js 4. Explicitly typing with a Props interface 5. Renaming the component to the standard 'Page' name 6. Using props.params pattern instead of destructuring None of these approaches have resolved the error. The error suggests that Next.js 15 expects 'params' to be a Promise, which seems unusual. ## Question What is the correct way to type dynamic route pages in Next.js 15 to satisfy the PageProps constraint? Is this a known issue with Next.js 15, and is there a specific workaround you'd recommend? Thank you for your help!
-params: {id:string};
+params:Promise<{id:string}>;

...

-props.params.id
+(await props.params).id
nextjs v15 moved to async APIs
so props.params and props.searchParams are now promises
thank you, i'll try this out!