Setting a metadata field to undefined prevents falling back to the parent component's metadata value
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/dark-architecture-go8s7s
To Reproduce
- Load the repro application in Codesandbox
- View source on the homepage - confirm that the "description" meta tag appears in the document
- Click the link to visit the About page - confirm that the "description" meta tag appears in the document
- Click the link to visit the Dashboard page - observe that no "description" meta tag appears in the
Current vs. Expected behavior
Expected behavior:
When the "description" field is either absent, or present but undefined in the metadata object, the value rendered on the page will be the fallback parent's "description" field.
Actual behavior
When the description field is absent from the metadata, the value will use the parent's metadata as expected. But if the field is present but undefined, no fallback will be used, and no description tag will be rendered.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4102
Available CPU cores: 2
Binaries:
Node: 20.9.0
npm: 9.8.1
Yarn: 1.22.19
pnpm: 8.10.2
Relevant Packages:
next: 15.0.1-canary.2 // Latest available version is detected (15.0.1-canary.2).
eslint-config-next: N/A
react: 19.0.0-rc-69d4b800-20241021
react-dom: 19.0.0-rc-69d4b800-20241021
typescript: 5.3.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Metadata
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
It seems like a common use case to try to set a metadata field with a possibly undefined value.
An example:
export async function generateMetadata(
{ params, searchParams }: Props
): Promise<Metadata> {
// read route params
const id = (await params).id
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
return {
title: product.title,
// use optional chaining to access the subtitle, which will fall back to undefined if the product is not present
// this may also be undefined if subtitle is an optional field
description: product?.subtitle
}
}
I would expect that if the value is undefined, the parent metadata value is shown. But instead the field is removed completely from the document. This is unexpected.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and the generateMetadata example in the issue, then trace how Next.js merges metadata across the homepage, About, and Dashboard routes. Reproduce the missing description when the child value is undefined in next dev, next build, or next start. Done means the parent's description remains rendered for both absent and explicitly undefined child values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100