Awaiting Params in Next.js Metadata

Introduction

When working with dynamic routes in Next.js, you might encounter this warning:

params should be awaited before using its properties.

This occurs when generating dynamic metadata. Let's understand why this happens and how to fix it properly.

Why This Warning Appears

In Next.js dynamic routes (like [slug].tsx), the generateMetadata function receives params as a Promise when:

1. Using Server Components 🖥️
2. Performing asynchronous operations ⏳
3. Using dynamic route segments 🌍

If you access params properties without awaiting, you're trying to read from a Promise object rather than the actual parameters.

The Solution

Always await the params promise before destructuring:

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  // ✅ Correct: Await first
  const { slug } = await params;
 
  return {
    title: `Post: ${slug}`,
    description: `Details about ${slug}`,
  };
}

Common Patterns

1. Basic Usage

export async function generateMetadata({ params }) {
  const { id } = await params;
  return { title: `Item ${id}` };
}

2. With External Data Fetching

export async function generateMetadata({ params }) {
  const { userId } = await params;
  const user = await fetchUser(userId);
 
  return {
    title: user.name,
    description: `${user.name}'s profile page`,
  };
}

3. TypeScript Implementation

interface Params {
  productId: string;
  category: string;
}
 
export async function generateMetadata({
  params,
}: {
  params: Promise<Params>;
}) {
  const { productId } = await params;
  // ...
}

Troubleshooting

Error: "Property does not exist on type 'Promise'"

This means you're trying to access params directly. Be sure to always await the promise.

// ❌ Wrong
const title = params.slug;
 
// ✅ Correct
const { slug } = await params;

Best Practices

• Always type your params in TypeScript.
• Handle potential undefined values.
• Consider adding error boundaries for failed fetches.

Conclusion

By properly awaiting params in generateMetadata, you ensure:

✔️ Type safety
✔️ Predictable behavior
✔️ Cleaner error handling

Next.js metadata generation becomes much more reliable when you understand this fundamental async pattern.