Returning `notFound` from `getStaticProps` with dynamic path and middleware shows error page instead of 404 page
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/dreamy-villani-mh2lrd?workspaceId=ws_PaH83X1dr2DdF1ajuypJkh
To Reproduce
- Start the application in development mode (next dev)
- Navigate to the dynamic path, for instance: https://mh2lrd-3001.csb.app/products/3/hello
- 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
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 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