Next.js App Router - Not Found UI

Not Found UI is a special feature in Next.js. By creating a not-found.js file, you can automatically display a custom 404 interface when a user visits a non-existent page.

When a route does not exist or the notFound() function is called, Next.js automatically displays the nearest not-found.js boundary, showing users a friendly 404 message instead of the default error page.

🔍 Not-Found.js Live Demo

Experience how Next.js's not-found.js file convention works

Click the button below to enter a dedicated demo page that calls the notFound() function, truly triggering the display of not-found.js.

Enter Not-Found.js Demo

The demo page will call the notFound() function and then display the not-found.js UI

Current File Structure
app/file-conventions/not-found/
├── not-found.js ← This file defines the 404 UI
├── page.tsx ← Current entry page (synchronous)
└── demo/
    └── page.tsx ← Demo page (calls notFound(), triggering not-found.js)

✅ The demo page will truly call notFound() and trigger not-found.js, while the entry page remains stable