Sometimes, users may visit routes that aren’t handled by your application. In these cases, a common UX pattern is to display a "Not Found" page that informs users the page doesn’t exist and provides a link to navigate back to the home page or any other page that exists.
In Next.js, creating a global Not Found page is straightforward.
All you need to do is create a file named not-found.tsx inside the app folder.
Note
The file must be named exactly not-found.tsx.
Whatever you render in this file will be shown to users when they visit a route that doesn’t exist in your application.
For example, you can create a Not Found page like this:
import Link from "next/link";
import { Icons } from "@/components/icons";
export default function NotFound() {
return (
<>
<div className="mx-auto max-w-xl px-4 text-center">
<p className="mb-2 text-sm font-medium text-secondary-foreground">
404
</p>
<h2 className="mb-2 text-2xl font-semibold tracking-tight text-secondary-foreground">
Page not found
</h2>
<p className="mb-4 text-pretty text-sm text-muted-foreground">
Sorry, we couldn't find the page you're looking for
</p>
<Link
href="/"
className="inline-flex items-center gap-1 p-2 text-sm font-medium text-primary transition-colors hover:text-blue-500"
>
Return home
<Icons.arrowRight className="size-4" />
</Link>
</div>
</>
);
}In action, the page above will look like this:
