Next.js

Soubor page.tsx je Server Component. Načte produkt na serveru, zpracuje neexistující ID a pošle klientovi pouze hodnoty potřebné pro tlačítko. Komponenta AddToCart vyznačí hranici use client, protože používá state a event handler; zde volaný fetch se proto spouští v prohlížeči.

Ukázka záměrně odděluje UI od autoritativního API. Endpoint košíku musí na serveru autentizovat uživatele, autorizovat operaci, ověřit produkt i cenu a podle způsobu autentizace řešit ochranu requestu. Úspěšný lokální render tato pravidla nenahrazuje.

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('Košík nelze změnit.');
      setStatus('added');
    } catch {
      setStatus('error');
    }
  }

  return (
    <div>
      <button type="button" disabled={disabled || status === 'pending'} onClick={handleAdd}>
        {status === 'added' ? 'Přidáno' : 'Přidat do košíku'}
      </button>
      <span aria-live="polite">
        {status === 'error' ? 'Přidání se nezdařilo.' : ''}
      </span>
    </div>
  );
}