Next.js

The page.tsx file is a Server Component. It loads the product on the server, handles an unknown ID, and sends only the values needed by the button to the client. AddToCart marks a use client boundary because it uses state and an event handler, so the fetch call in this component runs in the browser.

The example deliberately keeps the UI separate from the authoritative API. The cart endpoint must authenticate the user, authorise the operation, validate the product and price, and protect the request as required by the authentication method. A successful local render does not replace any of those checks.

TypeScript / Next.js (TSX)

// app/products/[id]/page.tsx — Server Component
import { notFound } from 'next/navigation';
import AddToCart from './add-to-cart';
import { getProduct } from '@/lib/products';

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  if (!product) notFound();

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.formattedPrice}</p>
      <AddToCart productId={product.id} disabled={!product.inStock} />
    </main>
  );
}

// app/products/[id]/add-to-cart.tsx — Client Component
'use client';

import { useState } from 'react';

export default function AddToCart({
  productId, disabled,
}: {
  productId: string;
  disabled: boolean;
}) {
  const [status, setStatus] = useState<'idle' | 'pending' | 'added' | 'error'>('idle');

  async function handleAdd() {
    setStatus('pending');
    try {
      const response = await fetch('/api/cart', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ productId, quantity: 1 }),
      });
      if (!response.ok) throw new Error('The cart could not be updated.');
      setStatus('added');
    } catch {
      setStatus('error');
    }
  }

  return (
    <div>
      <button type="button" disabled={disabled || status === 'pending'} onClick={handleAdd}>
        {status === 'added' ? 'Added' : 'Add to cart'}
      </button>
      <span aria-live="polite">
        {status === 'error' ? 'Could not add the item.' : ''}
      </span>
    </div>
  );
}