Componentes del Cliente

// app/components/counter.tsx
"use client";
 
import { useState } from "react";
 
export function Counter({ initialCount = 0 }: { initialCount?: number }) {
  const [count, setCount] = useState(initialCount);
 
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Conteo: {count}
    </button>
  );
}

// app/page.tsx (Server Component importa el Client Component)
import { Counter } from "./components/counter";
 
export default function Page() {
  return (
    <main>
      <h1>Bienvenido</h1>
      <Counter initialCount={5} />
    </main>
  );
}

// app/components/search-autocomplete.tsx
"use client";
 
import { useState, useEffect, useRef, useTransition } from "react";
import { useRouter } from "next/navigation";
 
type Suggestion = { id: string; label: string };
 
export function SearchAutocomplete() {
  const [query, setQuery] = useState("");
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const inputRef = useRef<HTMLInputElement>(null);
  const router = useRouter();
 
  useEffect(() => {
    if (query.length < 2) {
      setSuggestions([]);
      return;
    }
 
    const controller = new AbortController();
 
    fetch(`/api/suggestions?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    })
      .then((res) => res.json())
      .then((data) => setSuggestions(data))
      .catch(() => {}); // ignorar errores de abort
 
    return () => controller.abort();
  }, [query]);
 
  function handleSelect(suggestion: Suggestion) {
    setQuery(suggestion.label);
    setIsOpen(false);
    startTransition(() => {
      router.push(`/search?q=${encodeURIComponent(suggestion.label)}`);
    });
  }
 
  return (
    <div className="relative w-full max-w-md">
      <input
        ref={inputRef}
        type="search"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setIsOpen(true);
        }}
        onFocus={() => setIsOpen(true)}
        placeholder="Buscar..."
        className="w-full border rounded px-4 py-2"
      />
 
      {isOpen && suggestions.length > 0 && (
        <ul className="absolute top-full left-0 right-0 bg-white border rounded-b shadow-lg z-10">
          {suggestions.map((s) => (
            <li key={s.id}>
              <button
                onClick={() => handleSelect(s)}
                className="w-full text-left px-4 py-2 hover:bg-gray-100"
              >
                {s.label}
              </button>
            </li>
          ))}
        </ul>
      )}
 
      {isPending && (
        <span className="absolute right-3 top-2.5 text-sm text-gray-400">
          Cargando...
        </span>
      )}
    </div>
  );
}

// app/search/page.tsx (Server Component)
import { SearchAutocomplete } from "@/app/components/search-autocomplete";
 
export default function SearchPage() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold mb-4">Búsqueda</h1>
      <SearchAutocomplete />
    </main>
  );
}

"use client";
 
import { useState } from "react";
 
export function EmailForm({ onSubmitAction }: { onSubmitAction: (email: string) => Promise<void> }) {
  const [email, setEmail] = useState("");
 
  return (
    <form action={async () => { await onSubmitAction(email); }}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Suscribirse</button>
    </form>
  );
}

"use client";
 
import { useEffect, useState } from "react";
 
export function WindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
 
  useEffect(() => {
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
 
  return <p>Ventana: {size.width} x {size.height}</p>;
}

// app/components/map.tsx
"use client";
 
import { MapContainer, TileLayer, Marker } from "react-leaflet";
 
export function Map({ lat, lng }: { lat: number; lng: number }) {
  return (
    <MapContainer center={[lat, lng]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[lat, lng]} />
    </MapContainer>
  );
}

// Los props del servidor deben ser serializables
type ClientProps = {
  initialData: string[];        // OK
  count: number;                // OK
  serverAction: (id: string) => Promise<void>; // OK (Server Action)
  // onClick: () => void;       // NOT OK (función regular)
  // ref: React.Ref<T>;        // NOT OK (no serializable)
};
 
// Tipos de manejador de eventos
function handleClick(e: React.MouseEvent<HTMLButtonElement>) { ... }
function handleChange(e: React.ChangeEvent<HTMLInputElement>) { ... }
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... }