Loading auth...
Easy10 minNext.js Fundamentals
UpdatedAug 3, 2026
Edit

Next.js Metadata API

CONCEPTS:Next.js Metadata API

Question Variations

  • "How do you handle SEO in the Next.js App Router?"
  • "What is the difference between the `metadata` object and `generateMetadata`?"
  • "How do you set a dynamic title for a blog post route?"
  • "How does Next.js handle conflicting metadata between a layout and a page?"

Why This Is Asked

SEO is a primary reason developers choose Next.js. The App Router replaced the old <Head> component with a more robust, server-side Metadata API. Interviewers want to see if you can manage SEO effectively, especially for dynamic pages like products or blog posts.

Key Concepts

  • Static vs Dynamic Metadata: When to use the object vs the function.
  • Metadata Merging: How child metadata overrides parent metadata.
  • OpenGraph & Twitter: Setting up social media previews.
  • generateMetadata: Fetching data to populate tags.
  • Ordering: The fact that generateMetadata can be async.

Question Variations

  • “How do you handle SEO in the Next.js App Router?”
  • “What is the difference between the metadata object and generateMetadata?”
  • “How do you set a dynamic title for a blog post route?”
  • “How does Next.js handle conflicting metadata between a layout and a page?”

Answers by Technology

+ Add Variant
Next.jsImprove this answer ✏️

Expected Answer

In the App Router, you handle metadata by exporting either a metadata object (static) or a generateMetadata function (dynamic) from a layout.js or page.js file.

Key Features:

  • Inheritance: Metadata defined in a layout is inherited by all child pages. If a page defines its own title, it overrides the layout’s title.
  • Dynamic Metadata: For routes like /products/[id], you use generateMetadata to fetch the product details and return the appropriate title, description, and images.
  • Server-Side: Metadata is computed on the server, ensuring search engines and social media bots can read it even without executing JavaScript.

Why It Matters

Proper metadata is crucial for SEO and social sharing (OpenGraph). The new API is more type-safe and performant than the old <Head> component, as it prevents duplicate tags and handles the merging logic automatically.

Example Code

Static Metadata (Layout)

TypeScript

// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | My Store',
    default: 'My Store',
  },
  description: 'The best products in the world.',
};

JavaScript

// app/layout.js
export const metadata = {
  title: {
    template: '%s | My Store',
    default: 'My Store',
  },
  description: 'The best products in the world.',
};

Dynamic Metadata (Page)

TypeScript

// app/products/[id]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(res => res.json());

  return {
    title: product.name,
    description: product.summary,
  };
}

JavaScript

// app/products/[id]/page.js
export async function generateMetadata({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(res => res.json());

  return {
    title: product.name,
    description: product.summary,
  };
}

Common Mistakes

  • Using next/head in the App Router: This is deprecated and doesn’t work as expected in Server Components.
  • Forgetting the template property: Using a template in the root layout makes it easy to maintain consistent branding across all page titles.
  • Slow generateMetadata: Since generateMetadata is awaited before the page starts streaming, expensive data fetching here can delay the Time to First Byte (TTFB).

Follow-up Questions

  • Can you use metadata in Client Components? (Answer: No, metadata must be exported from Server Components (Layouts or Pages)).
  • What are file-based metadata? (Answer: Files like opengraph-image.png or sitemap.ts that Next.js automatically recognizes and uses to generate the appropriate meta tags or files).

References