Metadata in Next.js

← Global Layouts Adding Title and Description →

∙ Next.js

Next.js metadata defines route titles, descriptions, canonical URLs, robots rules, and social sharing information. This lesson explains how it works, when to use it, how to implement it safely, and how to verify the result.

📝Syntax

export const metadata = {
  title: 'Dashboard',
  description: 'Account overview'
};

💻Example

// Topic: Metadata in Next.js
export const metadata = {
  title: 'Dashboard',
  description: 'Account overview'
};

export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}

👁Expected Output

<title>Dashboard</title>

🔍Line-by-line

Line	Meaning
`export const metadata = {`	Defines metadata that Next.js renders for this route.
`title: 'Dashboard',`	Forms part of the component, server operation, or configuration shown above.
`description: 'Account overview'`	Forms part of the component, server operation, or configuration shown above.
`};`	Forms part of the component, server operation, or configuration shown above.
`export default function DashboardPage() {`	Exports the React component that Next.js renders for the route.
`return <h1>Dashboard</h1>;`	Returns the response or interface produced by the function.
`}`	Forms part of the component, server operation, or configuration shown above.

🌎Real-World Uses

1Metadata is useful for marketing pages, articles, products, multilingual pages, and shareable content.
2A route can export a static metadata object or generate metadata from parameters and fetched data.
3A team should use it when the requirement matches its responsibility in search and sharing metadata.
4It should fit the surrounding route, data, security, and deployment design instead of being added in isolation.
5A successful implementation is visible through unique metadata, correct indexing rules, and accurate search and social previews.

⚠Common Mistakes

1Reusing one title or canonical URL across many dynamic pages creates duplicate and misleading search results.
2Copying an example without identifying which code runs on the server and which code reaches the browser.
3Handling only the happy path and forgetting loading, empty, invalid, unauthorized, and failed states.
4Adding client state or third-party libraries before confirming that built-in Next.js and browser features are insufficient.
5Skipping verification in a production build, where caching and runtime behavior can differ from development.

✅Best Practices

1Keep metadata close to the route and derive dynamic values from the same trusted data used to render the page.
2Keep the owning route, component, server function, and validation responsibility easy to identify.
3Use server-side code for trusted data and secrets; send only the data required by interactive browser components.
4Make loading, empty, success, and error states explicit for the user.
5Inspect the final head tags for several routes, including missing data, alternate languages, and social preview images.

💡What it means

1Next.js metadata defines route titles, descriptions, canonical URLs, robots rules, and social sharing information.
2The important question is not only what syntax to write, but what responsibility this feature owns.
3Its behavior should be understood in development, during a production build, and after deployment.
4Before implementing it, decide what input it receives, what result it produces, and how failure is shown.

💡How it works

1A route can export a static metadata object or generate metadata from parameters and fetched data.
2Next.js uses file and component boundaries to decide routing, server execution, browser execution, and caching.
3Data should cross each boundary in a small, serializable, and validated form.
4The final result should remain understandable when a user refreshes the page or opens the URL directly.

💡Step-by-step approach

1Create the smallest route or component that demonstrates Metadata.
2Add one realistic input or data source and show the successful result.
3Add the most likely failure case and display a useful response.
4Run this check: Inspect the final head tags for several routes, including missing data, alternate languages, and social preview images.

💡Production checklist

1Confirm server-only values and secrets never enter the browser bundle.
2Confirm direct URLs, refreshes, loading states, and errors behave correctly.
3Confirm caching and revalidation match the required data freshness.
4Measure the result using unique metadata, correct indexing rules, and accurate search and social previews.

📋Quick Summary

Next.js metadata defines route titles, descriptions, canonical URLs, robots rules, and social sharing information.
A route can export a static metadata object or generate metadata from parameters and fetched data.
Recommended approach: Keep metadata close to the route and derive dynamic values from the same trusted data used to render the page.
Main mistake to avoid: Reusing one title or canonical URL across many dynamic pages creates duplicate and misleading search results.
Verify it by doing the following: Inspect the final head tags for several routes, including missing data, alternate languages, and social preview images.

🎯Interview Questions

Q1. What is Metadata?

Answer: Next.js metadata defines route titles, descriptions, canonical URLs, robots rules, and social sharing information.

Q2. How does Metadata work in Next.js?

Answer: A route can export a static metadata object or generate metadata from parameters and fetched data.

Q3. When should you use Metadata?

Answer: Use it for marketing pages, articles, products, multilingual pages, and shareable content, when that responsibility belongs inside the Next.js application.

Q4. What is a common mistake with Metadata?

Answer: Reusing one title or canonical URL across many dynamic pages creates duplicate and misleading search results.

Q5. How would you test Metadata?

Answer: Inspect the final head tags for several routes, including missing data, alternate languages, and social preview images. The result should demonstrate unique metadata, correct indexing rules, and accurate search and social previews.

❓Quiz

Which approach is best when implementing Metadata?

Keep metadata close to the route and derive dynamic values from the same trusted data used to render the page.Move all code to the browser so every feature can use client state.Implement only the successful case and add error handling after deployment.Copy the first example found without checking its router or runtime assumptions.

←

PreviousGlobal Layouts

Next.js Tutorial

NextAdding Title and Description →

Metadata in Next.js

Related topics