Next.js 15 params Type Error During Build – Promise<any> Expected? New to programming - advice #80494
-
SummaryHey everyone, I'm running into a persistent build error after upgrading to version 15.3.3, and I'm hoping someone else has either solved this or can shed light on the expected behavior. When deploying to Vercel, I get the following:
This happens in a route like src/app/article/[slug]/page.tsx.
Context: In Next.js 15, I’ve seen that params in server components might now be a Promise — and that you're supposed to do:
But this seems to break type checking in some builds (Vercel especially), or even contradict the current behavior in local dev.
Has anyone found a reliable pattern that works with Vercel on Next 15+? Background: I am new to programming, so to be honest I don't quite understand all the logic. I've tried to break down the problem and solve it with AI but i'm just stuck in a loop and need to find a solution to the root issue. For context, I'm trying to build a basic support page for my startup and have tried to implement a basic home page --> category --> article system, but despite building and designing it to an acceptable standard I can't seem to deploy successfully on vercel even afters spending days trying to fix this issue. Thanks again. Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
Hi, As of version 15: interface PageProps {
params: Promise<{ slug: string }>
}
export default async function Page({ params }: PageProps) {
const { slug } = await params;
// rest of component
} Is the right thing to do. That has to work across the board. Do you have an example repository I could take a look at? Is this page also using |
Beta Was this translation helpful? Give feedback.
-
This is a confirmed change in Next.js 15 where interface PageProps {
params: Promise<{ slug: string }>
}
export default async function Page({ params }: PageProps) {
const { slug } = await params;
// rest of your component logic
} Why this happened: Quick fixes:
import { use } from react;
function ClientComponent({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = use(params);
} Migration help: npx @next/codemod@canary next-async-request-api . This is documented in the Next.js 15 upgrade guide and the codemod will handle most cases automatically. |
Beta Was this translation helpful? Give feedback.
This is a confirmed change in Next.js 15 where
params
are now asynchronous. The solution is to update your page components to await the params:Why this happened:
Next.js 15 introduced async params to enable better streaming and performance optimizations. This affects all dynamic route segments.
Quick fixes:
use()
hook for client components: