Departures
WDELogbook entry· 4 min read
If you have recently upgraded to Next.js 15 or started a new project, you might have encountered this frustrating error when working with dynamic routes:
If you've recently upgraded to Next.js 15 or started a new project, you might have encountered this frustrating error when working with dynamic routes:
Many developers are still writing dynamic route components like this:
This code looks perfectly reasonable and worked fine in earlier versions of Next.js. However, starting with Next.js 15, this approach will throw the error mentioned above.
The error occurs because of a fundamental change in how Next.js handles dynamic route parameters in version 15. The params object is now asynchronous and returns a Promise, which means you need to await it before accessing its properties.
This change was introduced to improve performance and provide better support for streaming and partial prerendering. It allows Next.js to optimize how it handles dynamic segments and provides more flexibility in how routes are processed.
To fix this error, you need to make two key changes to your component:
1. Make your component async 2. Await the params before using them
Here's the corrected version:
Let's examine what changed:
When updating your existing codebase:
2. Update all affected components: Make sure to update both the function declaration and the params usage.
3. Update TypeScript types: Don't forget to wrap your params type in Promise<>.
4. Test thoroughly: Dynamic routes are often critical parts of your application, so make sure to test all affected pages.
2. Not updating TypeScript types: Make sure your params type is wrapped in Promise<>.
3. Mixing old and new patterns: Be consistent across your codebase to avoid confusion.
While this change might seem like an inconvenience at first, it's part of Next.js's evolution toward better performance and more flexible rendering strategies. The migration is straightforward once you understand the pattern, and the async nature of params opens up new possibilities for optimization.
Remember: whenever you're working with dynamic routes in Next.js 15+, always await your params before using them. This small change will save you from encountering this common error and ensure your application works correctly with the latest version of Next.js.
Happy coding!
You must be logged in to comment
No comments yet. Be the first to comment!
Written by
Liu PurnomoI'm a Software Engineer who turns coffee into code, and sometimes I even make interactive web things that work! ☕💻 I'm also a certified multitasker: an Expert Drone Pilot (ask me for aerial selfies!), a Certified Instructor/Public Speaker (I talk a lot), and a Seasonal Runner who believes in running only when the weather is perfect. Let's connect!
More articles headed the same way as this one.
1Error: Route "/example/[slug]" used `params.slug`.
2`params` should be awaited before using its properties.
This error has become increasingly common as developers migrate their existing code or follow older tutorials that don't account for the latest Next.js changes. Jika Anda menggunakan MDX dalam Next.js dan mengalami masalah dengan tabel, baca juga artikel tentang MDX tables not rendering in Next.js. Let's dive into why this happens and how to fix it.
1export default function ExamplePage({ params }: { params: { slug: string } }) {
2 return <div>{params.slug}</div>;
3}
1export default async function ExamplePage({
2 params,
3}: {
4 params: Promise<{ slug: string }>;
5}) {
6 const { slug } = await params;
7
8 return <div>{slug}</div>;
9}
1// Before (synchronous)
2export default function ExamplePage({ params }: { params: { slug: string } }) {
3
4// After (asynchronous)
5export default async function ExamplePage({
6 params,
7}: {
8 params: Promise<{ slug: string }>;
9}) {
The function is now marked as async, and the type definition for params has changed from { slug: string } to {{CODE:Promise<{ slug: string }>}}.
1// Before (direct access)
2return <div>{params.slug}</div>;
3
4// After (awaited access)
5const { slug } = await params;
6return <div>{slug}</div>;
Instead of directly accessing params.slug, we now await the params Promise and destructure the values we need.
1// app/blog/[slug]/page.tsx
2export default async function BlogPost({
3 params,
4}: {
5 params: Promise<{ slug: string }>;
6}) {
7 const { slug } = await params;
8
9 return (
10 <article>
11 <h1>Blog Post: {slug}</h1>
12 {/* Your blog post content */}
13 </article>
14 );
15}
1// app/category/[category]/product/[id]/page.tsx
2export default async function ProductPage({
3 params,
4}: {
5 params: Promise<{ category: string; id: string }>;
6}) {
7 const { category, id } = await params;
8
9 return (
10 <div>
11 <h1>
12 Product {id} in {category}
13 </h1>
14 {/* Your product content */}
15 </div>
16 );
17}
1export default async function ShopPage({
2 params,
3 searchParams,
4}: {
5 params: Promise<{ category: string }>;
6 searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
7}) {
8 const { category } = await params;
9 const search = await searchParams;
10
11 return (
12 <div>
13 <h1>Category: {category}</h1>
14 {search.sort && <p>Sorted by: {search.sort}</p>}
15 </div>
16 );
17}
1. Search for dynamic route files: Look for files in your app directory that use bracket notation like [slug], [id], etc.
1. Forgetting to make the function async: The component must be marked as async to use await.