GenerateMetadata for dynamic metadata in NextJS - Mini Project: Build & Apply

GenerateMetadata for dynamic metadata

📖 Scenario: You are building a blog website using Next.js. Each blog post page should have its own unique title and description that changes based on the post content.

🎯 Goal: Create a dynamic generateMetadata function in a Next.js page that sets the page title and description based on the blog post data.

📋 What You'll Learn

Create a simple blog post data object with title and description fields

Add a config variable for the site name

Write a generateMetadata function that returns metadata using the blog post data and site name

Export the generateMetadata function from the page file

💡 Why This Matters

🌍 Real World

Dynamic metadata improves SEO and user experience by showing relevant titles and descriptions for each page.

💼 Career

Understanding Next.js dynamic metadata is important for frontend developers working on modern React frameworks and SEO optimization.

1

Create blog post data

Create a constant called post with these exact properties: title set to "Learn Next.js Metadata" and description set to "A beginner guide to dynamic metadata in Next.js".

NextJS

// Your code here

Need a hint?

Use const post = { title: "Learn Next.js Metadata", description: "A beginner guide to dynamic metadata in Next.js" }

2

Add site name configuration

Add a constant called siteName and set it to the string "My Blog Site".

NextJS

const post = {
  title: "Learn Next.js Metadata",
  description: "A beginner guide to dynamic metadata in Next.js"
};

// Your code here

Need a hint?

Use const siteName = "My Blog Site";

3

Write generateMetadata function

Write an exported async function called generateMetadata that returns an object with title set to `${post.title} | ${siteName}` and description set to post.description.

NextJS

const post = {
  title: "Learn Next.js Metadata",
  description: "A beginner guide to dynamic metadata in Next.js"
};

const siteName = "My Blog Site";

// Your code here

Need a hint?

Use export async function generateMetadata() { return { title: `${post.title} | ${siteName}`, description: post.description } }

4

Export generateMetadata from page

Ensure the generateMetadata function is exported from the page file so Next.js can use it for dynamic metadata.

NextJS

const post = {
  title: "Learn Next.js Metadata",
  description: "A beginner guide to dynamic metadata in Next.js"
};

const siteName = "My Blog Site";

export async function generateMetadata() {
  return {
    title: `${post.title} | ${siteName}`,
    description: post.description
  };
}

// Your code here

Need a hint?

Export a default React component function called Page to complete the page file.