vercel / vercel/next.js

Returning `notFound` from `getStaticProps` with dynamic path and middleware shows error page instead of 404 page

Open
#74,276 2 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

linear: next Middleware Pages Router
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/dreamy-villani-mh2lrd?workspaceId=ws_PaH83X1dr2DdF1ajuypJkh

To Reproduce
  1. Start the application in development mode (next dev)
  2. Navigate to the dynamic path, for instance: https://mh2lrd-3001.csb.app/products/3/hello
  3. The following error is shown: Error: Failed to load static props
Current vs. Expected behavior

Expected:
When navigating to a route with getStaticProps that returns notFound: true, I expect to see the custom 404 page.
Actual:
Instead, the default error page is shown.

If the middleware is removed, the bug does not reproduce - the 404 page is shown.
From the network calls, it appears that a fetch to 404.json with query params representing the dymanic path fails (with a 404 status code).

For instance - a call to: _next/data/cYcaBxmaNOQIDHRyOqEZf/404.json?id=3&slug=hello has a 404 response.

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.1.1-canary.18 // Latest available version is detected (15.1.1-canary.18).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Middleware, Pages Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Other (Deployed)

Additional context

The bug does not reproduce in next@14.1.4.
Any version from next@14.2.0 onwards reproduces the bug.

It reproduces in dev, running locally, and in our production environment (self hosted).

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 run it with next dev, then compare navigation to the dynamic path with and without middleware. Trace the _next/data/.../404.json request and the getStaticProps notFound handling for dynamic parameters. Done means the route displays the custom 404 page instead of the default error page.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js
Domain
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.