Metadata in layouts in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of metadata in Next.js layouts?

Metadata in Next.js layouts defines information like page titles, descriptions, and icons that help browsers and search engines understand the page content.

beginner

How do you define metadata in a Next.js layout file?

You export a constant named metadata from the layout file, which is an object containing properties like title, description, and icons.

intermediate

Can metadata in Next.js layouts be dynamic or must it be static?

Metadata in Next.js layouts is typically static and exported as a constant. For dynamic metadata, you use special functions or server components to generate it per page.

intermediate

What happens if you define metadata in both a layout and a page in Next.js?

Metadata defined in a page overrides or merges with the metadata from the layout, allowing specific pages to customize titles or descriptions while keeping shared layout metadata.

beginner

Why is it important to include metadata like description and icons in layouts?

Including metadata like description helps search engines show meaningful summaries, and icons improve user experience by showing the right favicon in browser tabs.

How do you add a page title in a Next.js layout's metadata?

A Use a <code>&lt;title&gt;</code> tag inside the layout's JSX

B Set a global variable named <code>pageTitle</code>

C Export a <code>metadata</code> object with a <code>title</code> property

D Add a <code>title</code> attribute to the layout's root element

In Next.js layouts, you export a metadata object with a title property to set the page title.

What type of data structure is used for metadata in Next.js layouts?

A A plain JavaScript object

B A function returning JSX

C An array of strings

D A JSON string

Metadata is defined as a plain JavaScript object exported from the layout file.

If a page defines metadata and its parent layout also defines metadata, what happens?

A Page metadata merges or overrides layout metadata where specified

B Layout metadata is ignored

C Both metadata objects cause an error

D Page metadata completely replaces layout metadata

Page metadata merges with or overrides layout metadata, allowing customization per page.

Which metadata property is used to specify the favicon in Next.js layouts?

A image

B favicon

C icon

D icons

The icons property is used to specify favicons and related icons.

Why should metadata be included in layouts rather than only in pages?

A To make metadata dynamic

B To avoid repeating common metadata on every page

C Because pages cannot have metadata

D To disable SEO

Including metadata in layouts avoids repetition and ensures consistent metadata across pages.

Explain how metadata is defined and used in Next.js layouts.

Think about how you tell the browser about page info in a shared layout.

Describe the benefits of placing metadata in layouts instead of only in individual pages.

Consider how shared info helps when many pages use the same layout.