vercel / vercel/next.js

Setting a metadata field to undefined prevents falling back to the parent component's metadata value

Open
#71,668 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Metadata
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
  1. Load the repro application in Codesandbox
  2. View source on the homepage - confirm that the "description" meta tag appears in the document
  3. Click the link to visit the About page - confirm that the "description" meta tag appears in the document
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.