Metadata API (static metadata) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export static metadata in a Next.js page.

NextJS

export const metadata [1] {
  title: 'Home Page',
  description: 'Welcome to the home page'
};

Drag options to blanks, or click blank then click option'

A=

B:

C=>

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon (:) instead of equals (=) after metadata

Using arrow function syntax instead of object assignment

In Next.js, static metadata is exported using export const metadata = { ... }.

2fill in blank

medium

Complete the code to set the page title in static metadata.

NextJS

export const metadata = {
  [1]: 'About Us'
};

Drag options to blanks, or click blank then click option'

Aname

Bheader

Ctitle

DpageTitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using header or name instead of title

Using camelCase like pageTitle which is not recognized

The title property sets the page title in Next.js static metadata.

3fill in blank

hard

Fix the error in the metadata export syntax.

NextJS

export const metadata = [1]
  title: 'Blog'
};

Drag options to blanks, or click blank then click option'

A{

B[

C(

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets [] which define arrays

Using parentheses () or angle brackets <> which are invalid here

Metadata must be an object, not an array. Use curly braces {} to define the object.

4fill in blank

hard

Fill both blanks to define metadata with title and description.

NextJS

export const metadata = {
  [1]: 'Contact',
  [2]: 'Get in touch with us'
};

Drag options to blanks, or click blank then click option'

Atitle

Bheader

Cdescription

Dsubtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using header or subtitle which are not valid metadata keys

Swapping the order of title and description keys

The title and description properties define the page title and description in static metadata.

5fill in blank

hard

Fill all three blanks to export metadata with title, description, and keywords.

NextJS

export const metadata = {
  [1]: 'Services',
  [2]: 'Our services overview',
  [3]: ['web', 'design', 'development']
};

Drag options to blanks, or click blank then click option'

Atitle

Bdescription

Ckeywords

Dtags

Attempts:

3 left

💡 Hint

Common Mistakes

Using tags instead of keywords

Mixing up the order of properties

Use title, description, and keywords to define static metadata properties for SEO and page info.