Metadata in layouts in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does metadata in a Next.js layout affect the page?

Consider a Next.js app with a layout that defines metadata such as title and description. What happens to the page's metadata when this layout is used?

NextJS

export const metadata = { title: 'My Layout Title', description: 'Layout description' };

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

A The layout's metadata is ignored and only the page's metadata is used.

B The page uses the layout's metadata unless the page itself overrides it with its own metadata.

C The metadata from both layout and page are merged, combining titles and descriptions.

D Metadata in layouts causes a runtime error and should not be used.

💡 Hint

Think about how Next.js prioritizes metadata from layouts and pages.

In Next.js, metadata defined in a layout applies to all pages using that layout unless a page defines its own metadata, which overrides the layout's metadata.

📝 Syntax

intermediate

Identify the correct way to export metadata in a Next.js layout

Which of the following code snippets correctly exports metadata in a Next.js layout file?

A export const metadata = { title: 'Layout Title' };

B export default const metadata = { title: 'Layout Title' };

C const metadata = { title: 'Layout Title' }; export metadata;

D export metadata = { title: 'Layout Title' };

💡 Hint

Remember how to export constants in ES modules.

The correct syntax to export a constant is using 'export const'. The other options have syntax errors.

❓ state_output

advanced

What is the final page title when nested layouts define metadata?

Given two nested layouts in Next.js, where the outer layout defines title: 'Outer' and the inner layout defines title: 'Inner', what will be the page's title when rendered?

NextJS

/* Outer layout */
export const metadata = { title: 'Outer' };
export default function OuterLayout({ children }) {
  return <div>{children}</div>;
}

/* Inner layout */
export const metadata = { title: 'Inner' };
export default function InnerLayout({ children }) {
  return <section>{children}</section>;
}

A The page title will be 'Outer - Inner'.

B The page title will be 'Outer'.

C The page title will be empty because of conflict.

D The page title will be 'Inner'.

💡 Hint

Think about which layout is closest to the page in the hierarchy.

Next.js uses the metadata from the closest layout to the page, so the inner layout's title overrides the outer layout's title.

🔧 Debug

advanced

Why does this metadata not update on client navigation?

A developer defines metadata in a Next.js layout but notices that when navigating client-side, the metadata (like title) does not update. What is the likely cause?

NextJS

export const metadata = { title: 'Static Title' };

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

A Metadata in layouts is static and does not update on client-side navigation unless pages define their own metadata.

B The developer forgot to wrap the layout in a <Head> component to update metadata.

C Next.js requires metadata to be defined inside the page component, not layouts.

D The metadata object must be a function returning metadata to update dynamically.

💡 Hint

Consider how Next.js handles metadata updates during client navigation.

Metadata defined in layouts is static and only applied once. For dynamic metadata updates on client navigation, pages need to define their own metadata or use dynamic metadata APIs.

🧠 Conceptual

expert

How does Next.js merge metadata from multiple nested layouts and pages?

In Next.js, when multiple nested layouts and a page define metadata objects with overlapping keys (e.g., title, description, icons), how does Next.js combine these metadata values for the final rendered page?

A Next.js concatenates all titles and descriptions from layouts and pages into a single string separated by commas.

B Next.js uses only the metadata from the outermost layout and ignores inner layouts and page metadata.

C Next.js merges metadata deeply, combining arrays like icons and overriding scalar values like title from the closest layout or page.

D Next.js throws an error if multiple metadata objects define the same keys.

💡 Hint

Think about how metadata like icons arrays and titles are handled in nested layouts.

Next.js merges metadata objects deeply: scalar values like title or description are overridden by the closest layout or page, while arrays like icons are combined from all levels.

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