0
0
NextJSframework~10 mins

Metadata in layouts in NextJS - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - Metadata in layouts
Define layout component
↓
Add metadata export
↓
Use layout in page
↓
Next.js reads metadata
↓
Inject metadata into <head>
↓
Render page with layout and metadata
This flow shows how Next.js reads metadata from a layout component and injects it into the page's head section automatically.
Execution Sample
NextJS
export const metadata = {
  title: 'My Site',
  description: 'Welcome to my site'
};

export default function Layout({ children }) {
  return <html lang="en"><body>{children}</body></html>;
}
Defines metadata in a layout and renders children inside HTML and body tags.
Execution Table
StepActionMetadata StatePage RenderedNotes
1Layout component defined with metadata export{ title: 'My Site', description: 'Welcome to my site' }NoMetadata ready but page not rendered
2Page imports and uses layout{ title: 'My Site', description: 'Welcome to my site' }NoLayout wraps page content
3Next.js reads metadata from layout{ title: 'My Site', description: 'Welcome to my site' }NoMetadata prepared for head injection
4Next.js injects metadata into <head>{ title: 'My Site', description: 'Welcome to my site' }NoHead tags updated with title and description
5Page renders with layout and metadata in head{ title: 'My Site', description: 'Welcome to my site' }YesUser sees page with correct title and description
💡 Page fully rendered with metadata injected into the head section
Variable Tracker
VariableStartAfter Step 1After Step 3After Step 5
metadataundefined{ title: 'My Site', description: 'Welcome to my site' }{ title: 'My Site', description: 'Welcome to my site' }{ title: 'My Site', description: 'Welcome to my site' }
pageRenderedfalsefalsefalsetrue
Key Moments - 2 Insights
Why does Next.js read metadata from the layout instead of the page?
Next.js reads metadata from the layout because the layout wraps the page and defines shared metadata, as shown in execution_table step 3.
When is the metadata actually injected into the HTML head?
Metadata is injected just before the page renders, at step 4 in the execution_table, ensuring the head has correct title and description.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution table, what is the metadata state at step 2?
Aundefined
B{ title: 'My Site', description: 'Welcome to my site' }
C{}
Dnull
💡 Hint
Check the 'Metadata State' column at step 2 in the execution_table
At which step does the page actually render with metadata injected?
AStep 3
BStep 1
CStep 5
DStep 2
💡 Hint
Look at the 'Page Rendered' column in the execution_table
If metadata was missing in the layout, what would change in the execution table?
AMetadata state would be undefined or empty at all steps
BPage would render earlier at step 1
CMetadata would be injected twice
DNo change in metadata state
💡 Hint
Refer to the 'Metadata State' column in the execution_table
Concept Snapshot
In Next.js layouts, export a metadata object.
Next.js reads this metadata automatically.
Metadata is injected into the HTML <head>.
This sets page title, description, and SEO info.
Layouts share metadata across pages.
No manual head tags needed.
Full Transcript
This visual execution shows how Next.js handles metadata in layouts. First, a layout component exports a metadata object with title and description. When a page uses this layout, Next.js reads the metadata from the layout before rendering. Then, Next.js injects the metadata into the HTML head section, setting the page title and description. Finally, the page renders with the layout and correct metadata visible in the browser. This process helps share metadata across pages easily and improves SEO without manual head tag management.