Error: Route "/X" used params.id. params should be awaited before using its properties.
ID: nextjs/async-params-nextjs15
Version Compatibility
| Version | Status | Introduced | Deprecated | Notes |
|---|---|---|---|---|
| 15 | active | — | — | — |
Root Cause
Breaking change in Next.js 15: params and searchParams are now Promises and must be awaited. The Next.js codemod can auto-migrate all pages and layouts.
genericWorkarounds
-
96% success Await params at the top of the page/layout function
Change: export default function Page({ params }: { params: { id: string } }) to: export default async function Page({ params }: { params: Promise<{ id: string }> }) { const { id } = await params; ... }. Apply the same pattern to searchParams.Sources: https://nextjs.org/docs/app/building-your-application/upgrading/version-15
-
93% success Update the type to Promise<T> for TypeScript type safety
Change params: { id: string } to params: Promise<{ id: string }>. This makes TypeScript catch any synchronous access to params properties at compile time. Apply to both params and searchParams. -
90% success Use the Next.js codemod for automated migration
Run: npx @next/codemod@latest next-async-request-api . This automatically migrates all pages, layouts, and route handlers to the async params/searchParams pattern. Review changes after running.
Sources: https://nextjs.org/docs/app/building-your-application/upgrading/codemods
Dead Ends
Common approaches that don't work:
-
Destructuring params in the function signature as in Next.js 14
92% fail
In Next.js 15, params is a Promise. Destructuring ({ params: { id } }) gives the Promise object properties, not the resolved values. The code runs without type errors but id is undefined at runtime.
-
Using React.use(params) in a server component
78% fail
React.use() is designed for client components to unwrap promises during render. In server components, use standard await instead. Using React.use in a server component may cause a different error or unexpected behavior.