Web Development
5 min read
Next.js 16 Breaking Change: Async Params and Dynamic Routes
# Next.js 16: Async Params Breaking Change
## The Problem
After upgrading to Next.js 16, all my project detail pages started returning 404 errors.
## The Cause
In Next.js 16, the `params` prop in dynamic routes is now a **Promise**.
### Before (Next.js 15)
```typescript
export default function Page({ params }: Props) {
const project = getProjectBySlug(params.slug);
// ...
}
```
### After (Next.js 16)
```typescript
export default async function Page({ params }: Props) {
const { slug } = await params;
const project = getProjectBySlug(slug);
// ...
}
```
## The Fix
1. Make the component `async`
2. `await` the params
3. Destructure the slug
## Lesson Learned
Always check the migration guide when upgrading major versions!
*This is a placeholder post. Full content coming soon!*