TSX Public

Dynamic Page with notFound

Render the nearest not-found UI when a requested App Router record does not exist.

#nextjs #app-router #routing #error-handling

TSX

// app/products/[id]/page.tsx

import { notFound } from 'next/navigation';

type PageProps = {
  params: Promise<{
    id: string;
  }>;
};

export default async function ProductPage({
  params,
}: PageProps) {
  const { id } = await params;

  const product = await db.product.findUnique({
    where: { id },
  });

  if (!product) {
    notFound();
  }

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}

Snippet actions

CodShot user

Updated: 2026-08-06 18:36

Public snippets

Forks