Building a Not Found Page

In real applications, users may try to open a page that does not exist. For example, they might enter the wrong URL or follow an outdated link.

Instead of showing a generic error, Next.js allows you to create a custom Not Found page. This improves user experience and keeps your app consistent.

Creating a Not Found Page

To define a Not Found page, create a file called not-found.tsx inside the app/ folder:

app/
  not-found.tsx

Example Implementation

export default function NotFound() {
  return (
    <div>
      <h1>Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

This page will be shown when a route is not found.

Triggering Not Found Programmatically

You can also trigger the Not Found page manually using the notFound() function.

import { notFound } from "next/navigation";

export default function ProductPage({ params }) {
  const product = null;

  if (!product) {
    notFound();
  }

  return <div>Product details</div>;
}

This is useful when data does not exist, for example:

• A product ID is invalid;
• A blog post is missing;
• A resource is deleted.

Why This Matters

• Users see a helpful message instead of a broken page;
• You keep control over the UI;
• You can handle missing data gracefully.