Metadata API (static metadata) in NextJS - Mini Project: Build & Apply

Next.js Metadata API with Static Metadata

📖 Scenario: You are building a simple Next.js page for a blog. You want to add static metadata like the page title and description to improve SEO and browser tab labels.

🎯 Goal: Create a Next.js page component that uses the Metadata API to define static metadata including title and description.

📋 What You'll Learn

Create a page component file named page.tsx

Define a metadata export with title and description properties

Create a default exported React functional component that renders a heading

Use the Next.js Metadata API static metadata pattern

💡 Why This Matters

🌍 Real World

Static metadata helps search engines and browsers understand your page content, improving SEO and user experience.

💼 Career

Knowing how to use Next.js Metadata API is essential for frontend developers working on modern React apps with good SEO practices.

1

Create the page component file with a basic React component

Create a file named page.tsx and write a default exported React functional component called Page that returns an <h1> with the text Welcome to My Blog.

NextJS

export default function Page() {
  // Your code here
}

Need a hint?

Use a function named Page and return an <h1> element with the exact text.

2

Add a static metadata export with title and description

Add a named export called metadata as a constant object with title set to 'My Blog' and description set to 'A blog about coding and tech.' above the Page component.

NextJS

export const metadata = {
  // Your code here
};

export default function Page() {
  return Welcome to My Blog;
}

Need a hint?

Define metadata as a constant object with the exact title and description values.

3

Ensure the metadata export is static and outside the component

Make sure the metadata export is declared outside and above the Page component function, so it is static and not inside the component body.

NextJS

export const metadata = {
  title: 'My Blog',
  description: 'A blog about coding and tech.'
};

// Your code here
export default function Page() {
  return Welcome to My Blog;
}

Need a hint?

Check that metadata is not inside the Page function but above it.

4

Complete the page with static metadata for Next.js

Confirm the file page.tsx exports the static metadata object with title and description, and the default Page component rendering the heading. This completes the static metadata setup for Next.js.

NextJS

// Confirm the code is complete
// Your code here

Need a hint?

Make sure all parts are present exactly as specified to complete the static metadata setup.