GenerateMetadata for dynamic metadata in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a dynamic metadata function in Next.js.

NextJS

export async function generateMetadata({ params }) {
  return {
    title: [1]
  };
}

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

Aparams.id

B'Static Title'

C`User Profile: ${params.id}`

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes instead of backticks for template literals.

Returning a static string instead of dynamic metadata.

The generateMetadata function returns an object with a dynamic title using template literals and params.id.

2fill in blank

medium

Complete the code to import the correct type for generateMetadata in Next.js.

NextJS

import type { [1] } from 'next';

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

AGenerateMetadataFunction

BGenerateMetadata

CMetadataFunction

DMetadata

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a non-existent type like 'GenerateMetadataFunction'.

Confusing the type with 'GenerateMetadata'.

The correct type to import for the generateMetadata function is Metadata from Next.js.

3fill in blank

hard

Fix the error in the code to correctly return dynamic metadata with async function.

NextJS

export async function generateMetadata({ params }) {
  const title = 'Profile of ' + [1];
  return {
    title
  };
}

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

Aparams.id

Bparams.slug

Cparams.name

Dparams.userId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong parameter name like userId or slug.

Forgetting to concatenate the parameter to the string.

The dynamic parameter is accessed as params.id to build the title string.

4fill in blank

hard

Fill both blanks to create a metadata object with dynamic title and description.

NextJS

export async function generateMetadata({ params }) {
  return {
    title: [1],
    description: [2]
  };
}

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

A`Post: ${params.slug}`

B`This is the post about ${params.slug}`

C'Static description'

D'Static title'

Attempts:

3 left

💡 Hint

Common Mistakes

Using static strings instead of dynamic template literals.

Mixing up title and description values.

The title and description use template literals with params.slug for dynamic metadata.

5fill in blank

hard

Fill all three blanks to generate metadata with dynamic title, description, and openGraph title.

NextJS

export async function generateMetadata({ params }) {
  return {
    title: [1],
    description: [2],
    openGraph: {
      title: [3]
    }
  };
}

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

A`Article: ${params.slug}`

B`Detailed info about ${params.slug}`

D'Static OpenGraph Title'

Attempts:

3 left

💡 Hint

Common Mistakes

Using static strings for openGraph title.

Not using template literals consistently.

The title and openGraph.title share the same dynamic template literal, while description is a different dynamic string.