vercel / vercel/next.js

Next.js returns HTML instead of JSON for _next/data requests

Open
#59,619 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Linking and Navigating Runtime
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/arichard-info/next-rewrite-middleware

To Reproduce
  1. Clone the repo
  2. npm run build
  3. npm run start
  4. Open the network tab and rollover the link
  5. Open the _next/data request in a new tab (for example http://localhost:3000/_next/data/Wyr4K4y9f6V6FjKlwRrH5ee/fr/nice-public-path.json) => you get the page JSON
  6. Change the buildId in the request (for example http://localhost:3000/_next/data/test/fr/nice-public-path.json => you get the page HTML

Conditions to reproduce :

  • Having rewrite rules in the middleware
  • Having i18n configuration in next.config.js
Current vs. Expected behavior

When using middleware rewrites + i18n, mismatches of buildId are not well catched for _next/data requests.

On client-side navigation, the _next/data requests with invalid buildId returns the page HTML instead of a 404. The expected behavior is to get a 404. The _next/data requests should never return HTML content

This causes issues for example when you have a custom cache configuration :
When you are behind a CDN cache and navigate between two pages, if _next/data calls contains the previous buildId, you're getting a broken page

Verify canary release
  • I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.6.9
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Middleware / Edge (API routes, runtime), Routing (next/router, next/navigation, next/link)

Additional context

No response

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

Clone the linked reproduction, then run npm run build and npm run start with its middleware rewrites and i18n configuration. Start by tracing the _next/data request handling for an invalid buildId; done means client-side requests with a mismatched buildId return a 404 rather than page HTML.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
backend, internationalization, 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.