Not Found and Global Error

app/not-found.tsx handles unknown URLs for the whole app. A segment can have its own one, shown when its page calls notFound().

// app/products/[id]/not-found.tsx
import Link from 'next/link';

export default function ProductNotFound() {
  return (
    <div>
      <h2>Product not found</h2>
      <p>It may have been removed or the link is wrong.</p>
      <Link href="/products">Browse all products</Link>
    </div>
  );
}

An error in the root layout cannot be caught by app/error.tsx (the boundary sits inside the layout). app/global-error.tsx replaces the whole document, so it must render its own <html> and <body>.

'use client';

export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <html lang="en">
      <body>
        <h1>Something went wrong</h1>
        <button onClick={() => reset()}>Reload</button>
      </body>
    </html>
  );
}