I’m using Next.js 15 with the App Router and facing an issue with handling "Not Found" pages in nested routes /dashboard/somerandomtest.

• I have a route /dashboard/user, and inside /dashboard,
• I have layout.tsx for the /dashboard route.
• page.tsx for the main dashboard page.
• A not-found.tsx that should handle any invalid /dashboard/* route.
• Inside the /dashboard/user path, I have
• A specific layout.tsx for the user route.
• A page.tsx for /dashboard/user.

A custom not-found.tsx to handle invalid routes specifically under /dashboard/*.

/app
  ├── /dashboard
  │   ├── /user
  │   │   ├── layout.tsx          // Layout for the /dashboard/user route
  │   │   ├── page.tsx            // Page for /dashboard/user
  │   │   └── not-found.tsx       // Not found page for /dashboard/user
  │   ├── layout.tsx              // Layout for the /dashboard route
  │   ├── page.tsx                // Dashboard page (if you want a general dashboard page)
  │   └── not-found.tsx           // Not found page for the /dashboard route
  └── not-found.tsx               // Overall not found page for the app (fallback for all routes)

app/dashboard/not-found.tsx

export default function DashboardNotFound() {
  return <div>Dashboard page not found</div>;
}

/app/dashboard/user/not-found.tsx

export default function UserNotFound() {
  return <div>User page not found</div>;
}

/app/not-found.tsx

export default function GlobalNotFound() {
  return <div>Page not found</div>;
}

What I want

When I visit any invalid route under /dashboard/*, such as /dashboard/somerandomtext, Next.js should automatically detect and render the nearby not-found.tsx (like /dashboard/not-found.tsx), without needing manual conditional rendering inside the page components.

For reference: enter image description here

when i navigate to random route inside /dashboard/*, I need app/dashboard/not-found.tsx to render

I’m using Next.js 15 with the App Router and facing an issue with handling "Not Found" pages in nested routes /dashboard/somerandomtest.

• I have a route /dashboard/user, and inside /dashboard,
• I have layout.tsx for the /dashboard route.
• page.tsx for the main dashboard page.
• A not-found.tsx that should handle any invalid /dashboard/* route.
• Inside the /dashboard/user path, I have
• A specific layout.tsx for the user route.
• A page.tsx for /dashboard/user.

A custom not-found.tsx to handle invalid routes specifically under /dashboard/*.

/app
  ├── /dashboard
  │   ├── /user
  │   │   ├── layout.tsx          // Layout for the /dashboard/user route
  │   │   ├── page.tsx            // Page for /dashboard/user
  │   │   └── not-found.tsx       // Not found page for /dashboard/user
  │   ├── layout.tsx              // Layout for the /dashboard route
  │   ├── page.tsx                // Dashboard page (if you want a general dashboard page)
  │   └── not-found.tsx           // Not found page for the /dashboard route
  └── not-found.tsx               // Overall not found page for the app (fallback for all routes)

app/dashboard/not-found.tsx

export default function DashboardNotFound() {
  return <div>Dashboard page not found</div>;
}

/app/dashboard/user/not-found.tsx

export default function UserNotFound() {
  return <div>User page not found</div>;
}

/app/not-found.tsx

export default function GlobalNotFound() {
  return <div>Page not found</div>;
}

What I want

When I visit any invalid route under /dashboard/*, such as /dashboard/somerandomtext, Next.js should automatically detect and render the nearby not-found.tsx (like /dashboard/not-found.tsx), without needing manual conditional rendering inside the page components.

For reference: enter image description here

when i navigate to random route inside /dashboard/*, I need app/dashboard/not-found.tsx to render

• javascript
• reactjs
• nextjs-dynamic-routing
• nextjs-15

2 Answers 2

You have the right idea, but Next doesn't use the file not-found.tsx ... it instead looks for a 404.js (or 404.tsx). Simply renaming that file should make it work the way you want.

If you want to have different looking 404 pages for different parts your site, you can simply check the URL the user is on (inside your 404 page) and adjust the output accordingly.

See https://nextjs./docs/pages/building-your-application/routing/custom-error for further info.

Next.js using wrong not-found.tsx file: How to make route segments use their own not-found page

I was struggling with an issue in Next.js 15 App Router where my dashboard's not-found.tsx file wasn't being used for non-existent dashboard routes.

The problem

When accessing an invalid route like /dashboard/something-that-doesnt-exist, Next.js would use the root not-found.tsx instead of the dashboard-specific one, even though I had:

src/
└── app/
    ├── not-found.tsx              # Root not-found
    └── dashboard/
        ├── page.tsx               # Dashboard page
        └── not-found.tsx          # Dashboard-specific not-found (wasn't being used!)

Solution: Use Dynamic Catch-all Routes

The solution is to create a catch-all dynamic route inside your dashboard folder:

src/
└── app/
    ├── not-found.tsx              # Root not-found
    └── dashboard/
        ├── page.tsx               # Dashboard page
        ├── not-found.tsx          # Dashboard-specific not-found
        └── [...notfound]/         # This is the key addition
            └── page.tsx           # Catch-all page that triggers the not-found

In the [...notfound]/page.tsx file, simply call the notFound() function:

import { notFound } from 'next/navigation';

export default function CatchAllDashboardPage() {
  notFound();
}

This ensures that any non-existent route under /dashboard/ will:

• Be caught by the catch-all route
• Trigger the notFound() function
• Use the closest not-found.tsx file in the folder hierarchy (the dashboard-specific one)

The trick is that the catch-all dynamic route will only be matched if no other specific routes match first, making it perfect for handling "not found" cases.