How Next.js Handles SEO ⚡ Metadata Internals Explained #13 || Next.js Anatomy || DeathCode - DeathCode

📑 Next.js 16 Metadata System Deep Dive

SEO, generateMetadata(), Merging, Caching & Internal Flow

Overview

Metadata Next.js ka SEO engine hai.

User normally page content dekhta hai, lekin:

  • Search engines
  • Social media platforms
  • Crawlers
  • Link preview systems

sabse pehle metadata ko read karte hain.

Metadata decide karta hai:

  • Google title kya dikhayega
  • Description kya hogi
  • Social sharing preview kaisa dikhega
  • Open Graph image kaunsi hogi
  • Twitter Card kaise render hogi

Isliye metadata sirf SEO feature nahi hai, balki application discovery system ka important part hai.

Metadata Kya Hota Hai?

Metadata page ke baare mein information hoti hai jo normally user ko visible nahi hoti.

Example:

<title>Next.js Course</title>
 
<meta
  name="description"
  content="Learn Next.js deeply"
/>

Mental Model

Book ke cover par:

  • Title
  • Author
  • Description

likha hota hai.

Ye actual content nahi hota.

Ye content ke baare mein information hoti hai.

Metadata bhi exactly wahi concept hai.

Metadata System in Next.js

Traditional HTML mein metadata manually <head> tag ke andar likhna padta tha.

<head>
  <title>My Website</title>
</head>

Large applications mein ye difficult ho jata hai.

Isliye Next.js structured Metadata API provide karta hai.

Static Metadata

Agar metadata fixed hai:

export const metadata = {
  title: "Next.js Anatomy",
  description: "Deep dive into Next.js"
};
 
export default function Page() {
  return <h1>Hello</h1>;
}

Characteristics

  • Build time par generate ho sakta hai
  • Fast
  • SEO friendly
  • No runtime work

Best Use Cases

  • Landing pages
  • About page
  • Documentation
  • Static marketing pages

Dynamic Metadata

Real applications mein metadata data ke according change hota hai.

Examples:

  • Blog posts
  • Product pages
  • User profiles

Static metadata sufficient nahi hota.

generateMetadata()

Next.js dynamic metadata ke liye:

generateMetadata()

provide karta hai.

Basic Example

export async function generateMetadata({
  params,
}) {
  const { slug } = await params;
 
  return {
    title: `Blog: ${slug}`,
    description: `Read about ${slug}`,
  };
}

Next.js 16 Important Change

Next.js 16 mein:

params

aur

searchParams

Promises hote hain.

Isliye:

const { slug } = await params;

required hai.

Metadata Lifecycle

Metadata rendering ke baad generate nahi hota.

Metadata rendering se pehle generate hota hai.

Internal Flow

User Request
      ↓
Route Resolution
      ↓
Layout Discovery
      ↓
Page Discovery
      ↓
generateMetadata()
      ↓
Metadata Merge
      ↓
HTML Generation
      ↓
Response

Important Rule

Metadata page rendering se pehle ready hota hai.

Isi wajah se crawlers ko complete metadata mil jata hai.

Server Execution

generateMetadata() sirf server par run hota hai.

Benefits

SEO

Metadata HTML response mein available hota hai.

Security

Secrets expose nahi hote.

Performance

Client-side metadata injection ki zarurat nahi hoti.

Example

export async function generateMetadata({
  params,
}) {
  const { slug } = await params;
 
  const post = await fetch(
    `https://api.example.com/posts/${slug}`
  ).then(r => r.json());
 
  return {
    title: post.title,
  };
}

Metadata Merging System

Large applications mein metadata multiple places se aa sakta hai.

Example:

app/
├─ layout.jsx
├─ blog/
│  ├─ layout.jsx
│  └─ [slug]/
│      └─ page.jsx

Question:

Final metadata kaun decide karega?

Answer:

Sab metadata layers merge hoti hain.

Parent → Child Override Rules

Root Layout:

export const metadata = {
  title: "Website",
  description: "Main site"
};

Blog Layout:

export const metadata = {
  title: "Blog"
};

Page:

export async function generateMetadata() {
  return {
    title: "Post Title"
  };
}

Final Metadata:

{
  title: "Post Title",
  description: "Main site"
}

Rule

Child metadata:

  • Parent values override kar sakta hai
  • Missing fields inherit karta hai

Mental Model

Metadata layers kapdon ki layers ki tarah hain.

Root Layout
     ↓
Blog Layout
     ↓
Page Metadata

Sabse outer layer final appearance decide karti hai.

Accessing Parent Metadata

Kabhi-kabhi child metadata ko parent metadata ki values chahiye hoti hain.

export async function generateMetadata(
  { params },
  parent
) {
  const parentMeta = await parent;
 
  return {
    title: `${parentMeta.title} | Blog`,
  };
}

Use Cases

  • SEO chaining
  • Nested sections
  • Dynamic title composition

Dynamic Metadata with Data Fetching

generateMetadata() ke andar fetch allowed hai.

export async function generateMetadata({
  params,
}) {
  const { slug } = await params;
 
  const res = await fetch(
    `https://api.com/posts/${slug}`
  );
 
  const post = await res.json();
 
  return {
    title: post.title,
    description: post.description,
  };
}

Metadata Fetch Lifecycle

Request
    ↓
generateMetadata()
    ↓
API Call
    ↓
Metadata Creation
    ↓
HTML Head Injection

Result:

SEO-ready metadata before page render.

Metadata Fetch Uses Next.js Fetch

Metadata ke andar use kiya gaya fetch bhi normal fetch nahi hota.

Ye same features inherit karta hai:

  • Caching
  • Revalidation
  • Deduplication

Metadata Caching

Default behaviour:

await fetch(url);

Practical mental model:

cache: "force-cache"

Result

Metadata bhi cached ho sakta hai.

Agar backend data update ho gaya:

Post Updated
      ↓
Cached Metadata
      ↓
Old Title Visible

aisa ho sakta hai.

Fresh Metadata

no-store

await fetch(url, {
  cache: "no-store",
});

Har request par fresh metadata.

Revalidation

await fetch(url, {
  next: {
    revalidate: 60,
  },
});

Hybrid strategy.

Request Deduplication

Suppose:

Page bhi same data fetch kar raha hai.

Metadata bhi same data fetch kar raha hai.

generateMetadata()

and

Page()

dono same endpoint call karte hain.

Question:

Kya 2 network requests jayengi?

Answer:

Normally nahi.

Next.js identical requests ko deduplicate kar deta hai.

Flow

Page Fetch
        ↓
Metadata Fetch
        ↓
Deduplication
        ↓
Single Network Request

Error Handling

Metadata generation fail nahi honi chahiye.

Bad Example:

const res = await fetch(url);
const post = await res.json();

Agar API fail hui:

  • Metadata fail
  • Render fail

Better Pattern

export async function generateMetadata({
  params,
}) {
  try {
    const { slug } = await params;
 
    const res = await fetch(
      `https://api.com/posts/${slug}`
    );
 
    if (!res.ok) {
      return {
        title: "Post Not Found",
      };
    }
 
    const post = await res.json();
 
    return {
      title: post.title,
      description: post.description,
    };
  } catch {
    return {
      title: "Error",
      description:
        "Something went wrong",
    };
  }
}

Performance Considerations

generateMetadata() slow hoga to:

Metadata Slow
      ↓
Head Generation Slow
      ↓
Response Slow

Isliye:

  • Heavy computations avoid karo
  • Duplicate fetches avoid karo
  • Caching use karo
  • Lightweight logic rakho

Runtime Considerations

Node Runtime

Suitable For:

  • Database queries
  • Heavy logic
  • Complex metadata generation

Edge Runtime

Suitable For:

  • Fast execution
  • Lightweight metadata

Avoid:

  • Heavy database operations
  • Large computations

Common Mistakes

Not Awaiting Params

const { slug } = params;

❌ Incorrect

const { slug } = await params;

✅ Correct

Duplicate Metadata Everywhere

Har page par same metadata.

Result:

  • Poor SEO
  • Duplicate content issues

Heavy Metadata Logic

Large database queries

Multiple API requests

Complex processing

Result:

Slow responses.

Final Mental Model

Metadata
    ↓
SEO Layer
    ↓
Server Execution
    ↓
Merge System
    ↓
Caching
    ↓
HTML Head

Golden Rules

  • Metadata rendering se pehle generate hota hai
  • generateMetadata() server-only function hai
  • Parent aur child metadata merge hote hain
  • Metadata fetch bhi cache ho sakta hai
  • Request deduplication metadata par bhi apply hoti hai
  • Metadata lightweight aur SEO-focused hona chahiye

Metadata ko sirf title aur description mat samjho.

Ye Next.js application ka SEO control center hai.

© 2024 DeathCode. All Rights Reserved.