Metadata API (static metadata) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Metadata API in Next.js static metadata?

The Metadata API in Next.js allows you to define page metadata like title, description, and icons statically. This helps improve SEO and user experience by providing consistent information for each page.

beginner

How do you define static metadata in a Next.js page?

You export a constant named metadata from your page file. This object includes properties like title, description, and icons that Next.js uses to generate the HTML metadata tags.

intermediate

Which metadata properties can you set using Next.js static Metadata API?

Common properties include title, description, icons, openGraph for social sharing, and robots for search engine instructions.

beginner

True or False: Static metadata in Next.js can be dynamic and change on the client side.

False. Static metadata is defined at build time and does not change on the client side. For dynamic metadata, you need to use server components or client-side logic.

intermediate

What is the benefit of using static metadata over manually adding <head> tags in Next.js?

Using static metadata is simpler, less error-prone, and integrates with Next.js features like automatic SEO optimization and social sharing previews. It also keeps metadata close to the page code for easier maintenance.

How do you export static metadata in a Next.js page?

A Export a constant named metadata

B Use a function named getMetadata()

C Add meta tags inside the component JSX

D Use a JSON file named metadata.json

Static metadata is exported as a constant named metadata from the page file.

Which property sets the page title in Next.js static metadata?

A pageTitle

B header

C title

D name

The title property sets the page title in the metadata object.

Can static metadata in Next.js include Open Graph data for social sharing?

A No

B Yes

C Only with plugins

D Only on client side

Static metadata supports openGraph property to define social sharing info.

When is static metadata processed in Next.js?

A At build time

B On every client request

C When user clicks a button

D After page load

Static metadata is processed at build time and included in the generated HTML.

What is a key advantage of using Next.js Metadata API over manual head tags?

A It only works on mobile

B It requires no coding

C It disables metadata

D It automatically optimizes SEO and social previews

Next.js Metadata API helps automatically optimize SEO and social sharing previews.

Explain how to add static metadata to a Next.js page and why it is useful.

Think about what metadata does for a webpage and how Next.js uses it.

List some common properties you can set in Next.js static metadata and their purpose.

Consider what information browsers and search engines need about a page.

Practice

1. What is the primary purpose of exporting a metadata object in a Next.js page or layout?

easy

A. To provide static information like title and description for SEO and social sharing

B. To define dynamic routes for the page

C. To handle user authentication on the page

D. To style the page with CSS variables

Solution

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

   The metadata object is used to add static information such as page title and description.

2. Step 2: Connect metadata to SEO and social sharing

   This information helps search engines and social media platforms display the page correctly.

3. Final Answer:

   To provide static information like title and description for SEO and social sharing -> Option A

4. Quick Check:

   Metadata = SEO info [OK]

Hint: Metadata sets page info for SEO and sharing [OK]

Common Mistakes:

• Confusing metadata with routing or styling
• Thinking metadata handles user login
• Assuming metadata is dynamic by default

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

easy

A. export default { metadata: { title: 'Home' } }

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

C. export const metadata = { title: 'Home' }

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

Solution

1. Step 1: Recall the syntax for static metadata export

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

2. Step 2: Check each option's syntax

   export const metadata = { title: 'Home' } correctly exports a constant object named metadata. The other options use incorrect export forms or syntax.

3. Final Answer:

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

4. Quick Check:

   Named export of object = export const metadata = { title: 'Home' } [OK]

Hint: Use named export const metadata = {...} [OK]

Common Mistakes:

• Using default export instead of named export
• Exporting a function instead of an object
• Incorrect export syntax causing errors

3. Given this metadata export in a Next.js page:

export const metadata = { title: 'About Us', description: 'Learn about our team' }

What will be the page's title shown in the browser tab?

medium

A. About Us

B. Learn about our team

C. metadata

D. No title will be shown

Solution

1. Step 1: Identify the title property in metadata

   The metadata object has a title set to 'About Us'.

2. Step 2: Understand how Next.js uses metadata

   Next.js uses the title property to set the browser tab's page title.

3. Final Answer:

   About Us -> Option A

4. Quick Check:

   Page title = metadata.title [OK]

Hint: Page title comes from metadata.title [OK]

Common Mistakes:

• Confusing description with title
• Expecting metadata object name as title
• Assuming no title is set without explicit <title> tag

4. You wrote this metadata export:

export const metadata = { title: 'Contact', description: Contact us page }

Why does this cause an error?

medium

A. export keyword is not allowed here

B. Missing quotes around the description string

C. title property cannot be 'Contact'

D. metadata must be a function, not an object

Solution

1. Step 1: Check the syntax of the description value

   The description value is written without quotes, which is invalid for strings in JavaScript.

2. Step 2: Understand JavaScript string syntax

   Strings must be enclosed in quotes (' or ") to be valid. Missing quotes cause a syntax error.

3. Final Answer:

   Missing quotes around the description string -> Option B

4. Quick Check:

   Strings need quotes [OK]

Hint: Always quote string values in metadata [OK]

Common Mistakes:

• Forgetting quotes around strings
• Thinking metadata must be a function
• Misplacing export keyword

5. You want to add static metadata with a title, description, and open graph image to a Next.js layout. Which is the correct way to include all these in the metadata export?

hard

A. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: { src: '/blog.png' } } }

B. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: '/blog.png' }

C. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { image: '/blog.png' } }

D. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } }

Solution

1. Step 1: Understand openGraph image format in Next.js metadata

   The openGraph images property expects an array of objects with a url key.

2. Step 2: Check each option's openGraph structure

   export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } } correctly uses an array with an object containing url. The other options use incorrect formats.

3. Final Answer:

   export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } } -> Option D

4. Quick Check:

   openGraph images = array of {url} objects [OK]

Hint: Use array of objects with url for openGraph images [OK]

Common Mistakes:

• Using string instead of array for images
• Using wrong property name like image instead of images
• Not wrapping image url in an object