Awaiting Params in Next.js Dynamic Routes

The Problem

When working with dynamic routes in the Next.js App Router (e.g., /blogs/[slug]), you may run into the following error:

❌ params should be awaited before using its properties.
Learn more: Next.js Dynamic API Error Documentation

This happens when you're trying to access params.slug without awaiting it. In the App Router, params is sometimes a Promise, especially when passed to async components.

// app/blogs/[slug]/page.tsx
import { FC } from "react";
 
interface RouteParams {
  slug: string;
}
 
// ❌ This will throw an error
const Page: FC<{ params: RouteParams }> = async ({ params }) => {
  return <div>{params.slug}</div>; // ⛔ Error here
};
 
export default Page;

The Solution

You need to await the params object before destructuring it.

// ✅ Corrected version
const Page: FC<{ params: Promise<RouteParams> }> = async ({ params }) => {
  const { slug } = await params; // Await the params before accessing
 
  return <div>{slug}</div>; // ✅ Now it's safe to use slug
};
 
export default Page;

Fix: Properly Await params

By marking the page component as async, we allow awaiting the params object. You should destructure the params after it's awaited.

Why This Works

By marking the component as async, we allow awaiting params.

Destructuring after await ensures you're working with actual values, not a Promise.

Best Practices

• Always check if params is a Promise before accessing its properties.
• Use proper TypeScript types for clarity and safety.
• Handle edge cases and errors gracefully (e.g., if slug is missing or invalid).

Conclusion

Avoiding the params should be awaited error in Next.js comes down to one simple rule:
Await your parameters in async functions, especially in dynamic route components. This ensures your app behaves predictably and avoids unnecessary runtime crashes. 🚀