Not Found Pages
A missing resource is different from a server failure. Next.js provides a notFound mechanism for rendering an appropriate not-found boundary.
For example, if /products/123 does not exist, the application should produce a proper 404 experience rather than throwing an unrelated server error.
Resource Not Found
import { notFound } from 'next/navigation';
export default async function ProductPage({
params
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params;
const product = await getProduct(id);
if (!product) {
notFound();
}
return <h1>{product.name}</h1>;
}💡 The route explicitly distinguishes a missing resource from an unexpected application failure.
Key Takeaways
- Use 404 semantics for missing resources.
- Do not treat every missing record as a 500 error.
- Create useful not-found experiences.