vercel / vercel/next.js

Bug with metadata alternates when using URL

Open
#68,351 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug linear: next 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://github.com/votemike/alternate-urls

To Reproduce
  • Start the application in development
  • Visit the homepage
  • Inspect the alternate URLs in the HTML
  • Notice the US one does not contain the US suffix
Current vs. Expected behavior

Expected:
I expect the HTML to contain <link rel="alternate" hreflang="en-GB" href="https://example.com"> and <link rel="alternate" hreflang="en-US" href="https://example.com/us">
Current:
The HTML does not contain the US suffix on the URL

Provide environment information
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Wed Apr 24 06:02:02 PDT 2024; root:xnu-8020.240.18.708.4~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 4
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.10
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.94 // Latest available version is detected (15.0.0-canary.94).
  eslint-config-next: N/A
  react: 19.0.0-rc-3208e73e-20240730
  react-dom: 19.0.0-rc-3208e73e-20240730
  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), Vercel (Deployed)

Additional context

I found this bug in Next 14.1.1
Casting the URL to a string gives me the output I expect. Not sure why the HTML doesn't reflect this.

Screenshot 2024-07-31 at 10 31 34

Screenshot
2024-07-31 at 10 30 44

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 reproduction at https://github.com/votemike/alternate-urls, run it in the reported Next.js environments, and inspect the rendered alternate links on the homepage. Compare the URL value with its string-cast output; done means the HTML includes the expected en-GB URL and the en-US URL with the /us suffix.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.