vercel / vercel/next.js

Custom 404 not working in Pages Router if `app` directory exists

Open
#58,945 25 comments 38 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Linking and Navigating
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/ajmnz/next-custom-404-repro

To Reproduce
  1. Install deps (npm i), start the dev server (npm run dev) and navigate to localhost:3000
  2. Follow the instructions shown
Current vs. Expected behavior

I expected Next.js to detect that I'm working with the Pages Router instead of assuming I'm using the App Router just because there's a directory called app.

When an app directory is present, Next.js will output ○ Compiling /not-found .... If renamed, it will change to ○ Compiling /404 ..., which is the expected behavior.

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.6.0: Wed Oct  4 21:25:26 PDT 2023; root:xnu-8796.141.3.701.17~4/RELEASE_X86_64
Binaries:
  Node: 20.8.0
  npm: 10.1.0
  Yarn: 1.22.10
  pnpm: N/A
Relevant Packages:
  next: 14.0.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Routing (next/router, next/navigation, next/link)

Additional context

I believe the offending release is between 13.3.4 and 13.5.4 (inclusive). I have an app on 13.3.4 with the same setup described (pages router and a directory called app) and custom 404s are working just fine.

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/ajmnz/next-custom-404-repro: run npm i, npm run dev, and follow its instructions. Investigate how Next.js selects the 404 or not-found route when both the Pages Router and an app directory exist. Done means a custom Pages Router 404 is selected without renaming the app directory, with coverage for this setup.

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.