404 Error :- This Page could not be loaded

Previews
8

Hey everyone,
I’ve encoutered the same Error and want to share my steps for fixing my App. My Next.js build process consistently defaulted to the pages router, completely ignoring my src/app directory, even though my project was set up to use the App Router.

The Symptom

When running npm run build, the output would always show the pages router, like this:

Route (pages) ─ ○ /404

This happened despite the fact that I had no /pages folder and had correctly set up my project with a src/app directory, including the required layout.tsx and page.tsx files.

What I Tried (That Didn’t Work)

I went through all the standard troubleshooting steps:

  • Ensuring src/app/layout.tsx and src/app/page.tsx existed and had correct content.
  • Deleting the .next folder and node_modules and reinstalling everything.
  • Simplifying my next.config.js to rule out configuration issues.

None of these steps solved the problem.

The Root Cause & Solution

The issue was surprisingly simple: There was a folder named app in the root directory of my project.

├── app/ ← THE CONFLICTING FOLDER
├── src/
│ ├── app/ ← The correct App Router directory
│ │ ├── layout.tsx
│ │ └── page.tsx
├── package.json
└── …

On case-insensitive file systems, the Next.js build process got confused by the presence of both an app folder and a src/app folder. This conflict caused it to fail to recognize the src/app directory correctly and fall back to the pages router as a default.

The solution was to simply delete the conflicting app folder from the project’s root.

After deleting it and running npm run build again, the build process immediately recognized the src/app directory, and my routes were built correctly.

22 Likes