Challenge - 5 Problems

🎖️

Metadata Master in Next.js Layouts

Get all challenges correct to earn this badge!

Test your skills under time pressure!

❓ component_behavior

intermediate

2:00remaining

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>;
}

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

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

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

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

Attempts:

2 left

📝 Syntax

intermediate

1:30remaining

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?

Aexport const metadata = { title: 'Layout Title' };

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

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

Dexport metadata = { title: 'Layout Title' };

Attempts:

2 left

❓ state_output

advanced

2:00remaining

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>;
}

AThe page title will be 'Outer - Inner'.

BThe page title will be 'Outer'.

CThe page title will be empty because of conflict.

DThe page title will be 'Inner'.

Attempts:

2 left

🔧 Debug

advanced

2:30remaining

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>;
}

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

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

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

DThe metadata object must be a function returning metadata to update dynamically.

Attempts:

2 left

🧠 Conceptual

expert

3:00remaining

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?

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

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

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

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

Attempts:

2 left