0
0
NextJSframework~5 mins

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

Choose your learning style9 modes available
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.
Click to reveal answer
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.
Click to reveal answer
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.
Click to reveal answer
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.
Click to reveal answer
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.
Click to reveal answer
How do you export static metadata in a Next.js page?
AExport a constant named metadata
BUse a function named getMetadata()
CAdd meta tags inside the component JSX
DUse a JSON file named metadata.json
Which property sets the page title in Next.js static metadata?
ApageTitle
Bheader
Ctitle
Dname
Can static metadata in Next.js include Open Graph data for social sharing?
ANo
BYes
COnly with plugins
DOnly on client side
When is static metadata processed in Next.js?
AAt build time
BOn every client request
CWhen user clicks a button
DAfter page load
What is a key advantage of using Next.js Metadata API over manual head tags?
AIt only works on mobile
BIt requires no coding
CIt disables metadata
DIt automatically optimizes SEO and social 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.
You got /4 concepts.
    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.
    You got /5 concepts.