nextjstypescriptnextjs-15async-awaitserver-componentsapp-routerdynamic-routes

Next.js App Router: Dynamic route params must be awaited in server components

Make the page component async, type params as a Promise, await params to access values, and then use the destructured value. Example: export default async function Page({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params; return <div>{slug}</div>; }

Problem

After upgrading to Next.js 15+, server components using params from dynamic routes crash with a "params should be awaited" error because dynamic route params are now async and cannot be accessed directly.

Solution

Attempts

Using the Next.js 14 pattern: function Page({ params }: { params: { slug: string } }) { return <div>{params.slug}</div> } — accessing params.slug directly.
Typing params as a plain object ({ slug: string }) and not awaiting it, which produced the runtime error.

## Problem After upgrading to Next.js 15+, server components using `params` from dynamic routes crash with "params should be awaited" error. ## Root Cause Next.js 15 changed dynamic route params to be async. `params.slug` no longer works directly — you must `await params` first. ## Solution ```typescript // Before (Next.js 14) export default function Page({ params }: { params: { slug: string } }) { return <div>{params.slug}</div> } // After (Next.js 15+) export default async function Page({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params return <div>{slug}</div> } ```

0 resolves0 commentsMar 31, 2026

Contribute to this knowledge

Get started free