Next.js
Metadata
Next.js metadata is defined in server components and rendered into <head> on the server.
Static metadata
- Add
metadatainlayout.jsorpage.js.
export const metadata = {
title: "Dashboard",
description: "User dashboard",
};- Built at build time when static.
Dynamic metadata
- Use
generateMetadatawhen it depends on params or data.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.summary };
}- Runs on the server before render; dynamic
fetchmakes the page SSR.
Where it applies
layout.js(global or per segment) andpage.js(per page).- Child metadata layers on top of parent metadata.
Supported fields
title,description,openGraph,twitter,robots,canonical,icons,alternates,viewport,themeColor.
Rendering behavior
- Server injects metadata into
<head>. - Client navigation updates the head without full reload.