0
0
NextJSframework~10 mins

Metadata in layouts in NextJS - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to define metadata in a Next.js layout.

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

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}
Drag options to blanks, or click blank then click option'
AMy Page Title
Blayout
Cdefault
Dchildren
Attempts:
3 left
💡 Hint
Common Mistakes
Using children as the title value.
Forgetting to export the metadata object.
2fill in blank
medium

Complete the code to add a description to the metadata object.

NextJS
export const metadata = {
  title: 'Home',
  description: '[1]'
};
Drag options to blanks, or click blank then click option'
AThis is the homepage
Bdefault
CRootLayout
Dchildren
Attempts:
3 left
💡 Hint
Common Mistakes
Using a component name instead of a description string.
Leaving the description empty.
3fill in blank
hard

Fix the error in the metadata export syntax.

NextJS
export const metadata[1] {
  title: 'About'
};
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.
Using arrow function syntax mistakenly.
4fill in blank
hard

Fill both blanks to add open graph metadata for title and description.

NextJS
export const metadata = {
  openGraph: {
    title: '[1]',
    description: '[2]'
  }
};
Drag options to blanks, or click blank then click option'
AMy Site
BWelcome to my site
Cchildren
DRootLayout
Attempts:
3 left
💡 Hint
Common Mistakes
Using component names instead of descriptive strings.
Leaving openGraph properties empty.
5fill in blank
hard

Fill all three blanks to define metadata with title, twitter card type, and robots directive.

NextJS
export const metadata = {
  title: '[1]',
  twitter: {
    card: '[2]'
  },
  robots: {
    index: [3]
  }
};
Drag options to blanks, or click blank then click option'
ABlog Post
Bsummary_large_image
Ctrue
Dfalse
Attempts:
3 left
💡 Hint
Common Mistakes
Using strings instead of boolean for robots index.
Using wrong Twitter card type.