Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

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

import { notFound } from 'next/navigation';
import type { Metadata } from 'next';

interface Props {
  params: { id: string };
  searchParams: { color?: string; size?: string };
}

// Static metadata
// (see generateMetadata for dynamic metadata)
export const metadata: Metadata = {
  title: 'Product Detail',
};

// Opt this page into dynamic rendering (no caching)
export const dynamic = 'force-dynamic';

async function getProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`);
  if (!res.ok) return null;
  return res.json();
}

export default async function ProductPage({ params, searchParams }: Props) {
  const product = await getProduct(params.id);

if (!product) notFound();

const { color = 'default', size = 'M' } = searchParams;

return (
    <section>
      <h1>{product.name}</h1>
      <p>Selected colour: {color}</p>
      <p>Selected size: {size}</p>
      <p className="text-2xl font-bold">${product.price}</p>
    </section>
  );
}