Error and Not-Found Pages

Two things that go wrong in real apps

Two problems happen on every real site: something throws an error (a database is down, an API fails), and someone visits a page that does not exist (a deleted post, a typo in the URL). If you do nothing, the user sees an ugly crash screen. Next.js gives you one special file for each case.

Catching errors with error.js

Put a file named error.js in a route folder, and it becomes an error boundary — a safety net that catches any error thrown while rendering that route and shows your friendly message instead of crashing the whole app. (An error boundary is a component that "catches" errors from the components inside it, like a try/catch for your UI.)

An error.js file must be a Client Component (it needs interactivity for the retry button), so it starts with use client. Next.js hands it two props: the error that happened and a reset function that retries.

'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong.</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Showing a custom 404 with not-found.js

A 404 means "this page does not exist". Put a not-found.js file in a route folder to design your own 404 screen for that area, instead of the plain default.

// app/blog/not-found.js
import Link from 'next/link';

export default function NotFound() {
  return (
    <div>
      <h2>Post not found</h2>
      <p>We could not find that blog post.</p>
      <Link href="/blog">Back to all posts</Link>
    </div>
  );
}

Triggering the 404 yourself with notFound()

Often you decide a page is missing — for example, someone visits /blog/9999 but post 9999 does not exist. Call the notFound() helper and Next.js stops rendering the page and shows your not-found.js instead.

// app/blog/[id]/page.js
import { notFound } from 'next/navigation';

export default async function PostPage({ params }) {
  const post = await getPost(params.id);
  if (!post) {
    notFound();   // stops here and shows not-found.js
  }
  return <h1>{post.title}</h1>;
}

What happens when notFound() runs, step by step

Here is exactly what Next.js does when a visitor opens a missing post like /blog/9999:

1. The visitor opens /blog/9999. Next.js runs the PostPage Server Component on the server.
2. The component calls getPost('9999'), which looks for that post and finds nothing — post is empty.
3. The if (!post) check is true, so the code calls notFound().
4. notFound() stops rendering the page right there — the <h1> below it never runs.
5. Next.js looks up the nearest not-found.js (here app/blog/not-found.js) and renders it instead.
6. The visitor sees your friendly "Post not found" screen, and the response carries a real 404 status code so search engines treat it correctly.

Which file for which problem