Next.js

Metadata Files, Sitemaps & OG Image Generation

28 min Lesson 55 of 80

Metadata Files, Sitemaps & OG Image Generation

This lesson expands the Next.js path with an advanced topic from the official Next.js documentation. The goal is not only to memorize an option or file name, but to understand its impact on rendering, caching, security, and deployment.

After this lesson you should be able to apply the topic in a real project, choose the right boundary for it, and explain it as a reviewable engineering decision.

Core Concepts

metadata routes
sitemap.ts
robots.ts
opengraph-image.tsx
ImageResponse

Practical Example

// app/sitemap.ts
import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPublishedPosts()
  return posts.map((post) => ({
    url: 'https://example.com/blog/' + post.slug,
    lastModified: post.updatedAt,
  }))
}

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'
export default async function Image() {
  return new ImageResponse(<div>Article</div>)
}

This lesson is aligned with these official Next.js documentation areas: Metadata files, sitemap, robots, and OG image docs.

Why It Matters

In production applications, this topic affects page speed, data freshness, authorization clarity, and operational reliability after deployment.

Implementation Workflow

Decide whether the data is public or user-specific.
Choose the smallest part of the tree that needs this behavior.
Connect the example to a real route and add a small verification check.
Document the effect on caching and deployment.

Hands-on Practice

Generate a sitemap and dynamic Open Graph image for blog posts from live content data.

Large dynamic sitemaps should be split and cached instead of recalculated slowly on every request.

Summary

Judge the implementation by how clear the decision is, whether the behavior is correct after build, and how easily it can be traced in production.