404 | This page could not be found.

Next.js can’t find the page you’re trying to access.

Fix 1: Check file location (App Router)

In the App Router, every page needs a page.tsx file inside a folder:

app/
  page.tsx           → /
  about/page.tsx     → /about        ✅
  about.tsx          → nothing       ❌ (no page.tsx)
  blog/[slug]/page.tsx → /blog/my-post ✅

Fix 2: Check file location (Pages Router)

In the Pages Router, the file name IS the route:

pages/
  index.tsx          → /
  about.tsx          → /about        ✅
  blog/[slug].tsx    → /blog/my-post ✅

Fix 3: Restart the dev server

After adding new files, sometimes the dev server doesn’t pick them up:

# Kill the server (Ctrl+C) and restart
npm run dev

Fix 4: Check dynamic routes

// app/blog/[slug]/page.tsx
// Make sure generateStaticParams returns the right slugs
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

If a slug isn’t in generateStaticParams and you’re using output: 'export' (static), that page won’t exist.

Fix 5: Check for trailing slashes

// next.config.js
module.exports = {
  trailingSlash: true,  // /about/ instead of /about
};

If trailingSlash is enabled, /about returns 404 but /about/ works (and vice versa).

Fix 6: Build and check

npm run build
# Look at the output — it lists all generated pages
# If your page isn't listed, it won't work in production

See also: Next.js cheat sheet | Vercel build failed fix

Related: What is Next.js · React Interview Questions · When To Use Ssr Vs Ssg Vs Spa