The 'not-found.tsx' file allows you to customize the 404 page for a specific route segment or the entire application.
Interactive Simulation Engine
404 Resolution Logic
Finding the nearest not-found boundary
File System
app/
blog/
not-found.tsx
[slug]/page.tsx
Type a URL and hit Go to see how Next.js searches for a matching route or 404 boundary.
The Logic: When a route doesn't match or notFound() is called, Next.js looks for the nearest not-found.tsx file in the directory hierarchy.
Executable Code Workbench
page.tsx
Live Code Editor1// app/blog/[slug]/not-found.tsx
2export default function NotFound() {
3 return <p>Blog post not found!</p>
4}
5
6// In page.tsx:
7import { notFound } from 'next/navigation'
8if (!post) notFound()Mental Model
A specialized error page that specifically says: 'I know what you're looking for, but it doesn't exist here.'
Why This Exists
To handle missing data gracefully. When a dynamic product ID doesn't exist in the database, you can manually trigger this UI.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."