Not-Found Handling: not-found.tsx and notFound()

1// app/products/[id]/page.tsx
2import { notFound } from 'next/navigation';
3
4export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
5  const { id } = await params;
6  
7  const product = await fetch(`https://api.store.com/products/${id}`, {
8    cache: 'no-store'
9  }).then(res => (res.ok ? res.json() : null));
10
11  // If item does not exist in DB, trigger notFound()
12  if (!product) {
13    notFound(); // Throws NEXT_NOT_FOUND error internally
14  }
15
16  return (
17    <div>
18      <h1>{product.title}</h1>
19      <p>{product.description}</p>
20    </div>
21  );
22}
23
24// app/products/[id]/not-found.tsx
25// Rendered inside products/[id] layout with HTTP 404 status header
26export default function ProductNotFound() {
27  return (
28    <div className="not-found-card">
29      <h2>Product Does Not Exist</h2>
30      <p>The requested product has been discontinued or removed.</p>
31    </div>
32  );
33}