0
0
NextJSframework~10 mins

GenerateMetadata for dynamic metadata in NextJS - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - GenerateMetadata for dynamic metadata
Request for page
↓
Call generateMetadata()
↓
Fetch or compute data
↓
Return metadata object
↓
Next.js uses metadata to set <head>
↓
Render page with dynamic metadata
When a page is requested, Next.js calls generateMetadata to get dynamic metadata, then uses it to set the page's head before rendering.
Execution Sample
NextJS
export async function generateMetadata({ params }) {
  const data = await fetchData(params.id);
  return {
    title: data.title,
    description: data.description
  };
}
This code fetches data based on params and returns dynamic metadata for the page.
Execution Table
StepActionInput/StateOutput/Result
1Page requestedparams.id = '123'Trigger generateMetadata call
2Call generateMetadataparams.id = '123'Start fetching data
3Fetch dataparams.id = '123'{ title: 'Hello', description: 'Welcome' }
4Return metadataFetched data{ title: 'Hello', description: 'Welcome' }
5Next.js sets <head>Metadata objectPage head updated with title and description
6Render pageMetadata setPage rendered with dynamic metadata
💡 generateMetadata returns metadata object, Next.js uses it to render page head dynamically
Variable Tracker
VariableStartAfter Step 3Final
params.idundefined'123''123'
dataundefined{ title: 'Hello', description: 'Welcome' }{ title: 'Hello', description: 'Welcome' }
metadataundefinedundefined{ title: 'Hello', description: 'Welcome' }
Key Moments - 2 Insights
Why does generateMetadata receive params as input?
Because generateMetadata uses params to fetch or compute the right metadata for the requested page, as shown in step 2 and 3 of the execution_table.
What happens if generateMetadata returns incomplete metadata?
Next.js will use whatever metadata is returned to set the page head, but missing fields may cause default or empty values, as seen in step 4 and 5.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution_table, what is the output of step 3?
ATrigger generateMetadata call
B{ title: 'Hello', description: 'Welcome' }
CPage rendered with dynamic metadata
DStart fetching data
💡 Hint
Check the 'Output/Result' column in step 3 of the execution_table.
At which step does Next.js update the page head with metadata?
AStep 5
BStep 2
CStep 4
DStep 6
💡 Hint
Look for the action describing setting in the execution_table.
If params.id was '456' instead of '123', which variable changes in variable_tracker?
Adata
Bmetadata
Cparams.id
DAll of the above
💡 Hint
Check the 'params.id' row in variable_tracker for changes.
Concept Snapshot
generateMetadata is an async function in Next.js that runs on each page request.
It receives params and returns an object with metadata like title and description.
Next.js uses this metadata to update the page <head> dynamically before rendering.
This enables pages to have unique metadata based on data or route parameters.
Full Transcript
When a user requests a page, Next.js calls the generateMetadata function with route parameters. This function fetches or computes data needed for metadata, such as the page title and description. After fetching, it returns an object containing this metadata. Next.js then uses this object to update the HTML head tags dynamically, ensuring the page has the correct metadata before rendering. This process allows each page to have unique metadata based on its content or URL parameters.