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

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

Step	Action	Metadata State	Page Rendered	Notes
1	Layout component defined with metadata export	{ title: 'My Site', description: 'Welcome to my site' }	No	Metadata ready but page not rendered
2	Page imports and uses layout	{ title: 'My Site', description: 'Welcome to my site' }	No	Layout wraps page content
3	Next.js reads metadata from layout	{ title: 'My Site', description: 'Welcome to my site' }	No	Metadata prepared for head injection
4	Next.js injects metadata into <head>	{ title: 'My Site', description: 'Welcome to my site' }	No	Head tags updated with title and description
5	Page renders with layout and metadata in head	{ title: 'My Site', description: 'Welcome to my site' }	Yes	User sees page with correct title and description

💡 Page fully rendered with metadata injected into the head section

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5
metadata	undefined	{ title: 'My Site', description: 'Welcome to my site' }	{ title: 'My Site', description: 'Welcome to my site' }	{ title: 'My Site', description: 'Welcome to my site' }
pageRendered	false	false	false	true

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

Look at the execution table, what is the metadata state at step 2?

A undefined

B { title: 'My Site', description: 'Welcome to my site' }

C {}

D null

💡 Hint

Check the 'Metadata State' column at step 2 in the execution_table

At which step does the page actually render with metadata injected?

A Step 3

B Step 1

C Step 5

D Step 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?

A Metadata state would be undefined or empty at all steps

B Page would render earlier at step 1

C Metadata would be injected twice

D No 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.

Practice

1. What is the main purpose of the metadata object in a Next.js layout?

easy

A. To manage client-side state in the layout

B. To style the layout components with CSS

C. To define page information like title and description for browsers and search engines

D. To handle user authentication in the layout

Solution

1. Step 1: Understand the role of metadata in Next.js

   The metadata object is used to provide page details such as title and description that browsers and search engines use.

2. Step 2: Differentiate metadata from other layout tasks

   Styling, authentication, and state management are handled separately, not by metadata.

3. Final Answer:

   To define page information like title and description for browsers and search engines -> Option C

4. Quick Check:

   Metadata = page info for browsers and SEO [OK]

Hint: Metadata sets page info, not styles or logic [OK]

Common Mistakes:

• Confusing metadata with CSS styling
• Thinking metadata manages user data
• Assuming metadata controls client state

2. Which of the following is the correct way to export metadata in a Next.js layout file?

easy

A. export metadata = { title: 'Home' };

B. const metadata = { title: 'Home' }; export default metadata;

C. export function metadata() { return { title: 'Home' }; }

D. export const metadata = { title: 'Home' };

Solution

1. Step 1: Recall Next.js metadata export syntax

   Next.js expects a named export called metadata as a constant object.

2. Step 2: Check each option's syntax

   export const metadata = { title: 'Home' }; correctly exports a constant object. const metadata = { title: 'Home' }; export default metadata; exports default, which is incorrect. export function metadata() { return { title: 'Home' }; } exports a function, not an object. export metadata = { title: 'Home' }; has invalid export syntax.

3. Final Answer:

   export const metadata = { title: 'Home' }; -> Option D

4. Quick Check:

   Named const export = correct syntax [OK]

Hint: Use named const export for metadata object [OK]

Common Mistakes:

• Using default export instead of named export
• Exporting a function instead of an object
• Incorrect export syntax without const

3. Given this layout file snippet, what will be the page title shown in the browser tab?

export const metadata = { title: 'Dashboard' };

export default function Layout({ children }) {
  return <main>{children}</main>;
}

medium

A. Dashboard

B. Home

C. Layout

D. No title will be shown

Solution

1. Step 1: Identify the metadata title value

   The metadata object sets title to 'Dashboard'.

2. Step 2: Understand Next.js behavior with metadata

   Next.js uses this metadata to set the HTML <title> tag, which appears in the browser tab.

3. Final Answer:

   Dashboard -> Option A

4. Quick Check:

   metadata.title = browser tab title [OK]

Hint: metadata.title sets browser tab title [OK]

Common Mistakes:

• Assuming default title if metadata is present
• Confusing layout function name with title
• Thinking children content affects title

4. You wrote this layout metadata but the page title does not update:

const metadata = { title: 'Profile' };

export default function Layout({ children }) {
  return <main>{children}</main>;
}

What is the error?

medium

A. The title property must be inside a function

B. metadata must be exported with export const metadata

C. Layout must be a class component to use metadata

D. Children must be wrapped in a <section> tag

Solution

1. Step 1: Check metadata export

   The metadata object is declared but not exported, so Next.js cannot read it.

2. Step 2: Confirm correct export syntax

   Next.js requires export const metadata = { ... } to recognize metadata.

3. Final Answer:

   metadata must be exported with export const metadata -> Option B

4. Quick Check:

   Export metadata for Next.js to use it [OK]

Hint: Always export metadata as named const [OK]

Common Mistakes:

• Forgetting to export metadata
• Using function or class for metadata
• Changing children wrapper tags unnecessarily

5. You want to set a default description for all pages using a root layout metadata, but override it on a specific page. How should you structure your Next.js metadata exports?

hard

A. Export metadata with description in root layout, then export metadata with a different description in the page layout

B. Only export metadata in the root layout; page metadata is ignored

C. Merge metadata objects manually inside the root layout component

D. Use a global CSS file to set description meta tag

Solution

1. Step 1: Understand metadata inheritance in Next.js

   Metadata in layouts is merged, so root layout metadata applies by default.

2. Step 2: Override metadata in nested layouts or pages

   Exporting metadata in a page or nested layout overrides root metadata for that page.

3. Step 3: Confirm correct approach

   Export metadata with description in root layout, then export metadata with a different description in the page layout correctly describes exporting metadata in root and overriding in page layout.

4. Final Answer:

   Export metadata with description in root layout, then export metadata with a different description in the page layout -> Option A

5. Quick Check:

   Root metadata sets default, page metadata overrides [OK]

Hint: Root metadata sets default; page metadata overrides [OK]

Common Mistakes:

• Assuming page metadata is ignored if root exists
• Trying to merge metadata manually in code
• Using CSS to set metadata tags