not-found.tsx file convention defines fallback UI when notFound() is called or a URL has no match.notFound() in your page or layout when data lookup fails for a valid-looking URL.not-found.tsx in the folder hierarchy handles the error.not-found.tsx at different route levels for context-appropriate messaging.app/not-found.tsx catches all unmatched URLs across the application.1import { notFound } from 'next/navigation';23export default async function BlogPost({4params,5}: {6params: Promise<{ slug: string }>;7}) {8const { slug } = await params;9const post = await getPost(slug);1011if (!post) {12notFound();13}1415return <Article post={post} />;16}
1export default function NotFound() {2return (3<div>4<h2>Post Not Found</h2>5// !mark6<Link href="/blog">Browse all posts</Link>7</div>8);9}
not-found.tsx is placed.The closest not-found.tsx in the folder tree handles the error.
| Topic | Guidance |
|---|---|
| Scope | Nearest not-found.tsx in the hierarchy wins |
| Trigger | Call notFound() when data is missing |
| UX | Provide clear next steps - home, search, categories |
| Root fallback | app/not-found.tsx catches all unmatched routes |
notFound() early before expensive operations when you detect invalid params.

