Nueva Ruta

page.tsx es siempre un Server Component por defecto. Lee datos directamente desde Supabase usando el cliente server.

import { createServerClient } from '@/lib/supabase/server';
import { redirect } from 'next/navigation';

// Metadatos estáticos o dinámicos
export const metadata = {
  title: 'Nombre de la página — Presupuesto',
};

// Props estándar de Next.js App Router
interface PageProps {
  params: Promise<{ id: string }>;       // rutas dinámicas
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function NombrePage({ params, searchParams }: PageProps) {
  const supabase = await createServerClient();

  // Verificar sesión
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) redirect('/login');

  // Fetch de datos del servidor
  const { data, error } = await supabase
    .from('tabla')
    .select('*')
    .eq('user_id', user.id);

  if (error) throw new Error(error.message);

  return (
    <main>
      {/* Componentes de features que reciben los datos como props */}
    </main>
  );
}

Paso 3 — Separación Server / Client

• La page.tsx obtiene los datos y los pasa como props a componentes
• Los componentes interactivos (formularios, gráficas) son Client Components separados
• Nunca mezclar fetch de datos y hooks de estado en el mismo componente

Paso 4 — Server Actions (actions.ts)

'use server';

import { createServerClient } from '@/lib/supabase/server';
import { revalidatePath } from 'next/cache';

// Siempre retornar { error } | { data }
export async function crearGasto(formData: FormData): Promise<{ error: string } | { data: Gasto }> {
  const supabase = await createServerClient();

  const { data: { user } } = await supabase.auth.getUser();
  if (!user) return { error: 'No autorizado' };

  // lógica de la action
  const { data, error } = await supabase.from('expenses').insert({ user_id: user.id, ...payload }).select().single();

  if (error) return { error: error.message };

  revalidatePath('/app/dashboard');
  return { data };
}

Paso 5 — loading.tsx y error.tsx

loading.tsx (Server Component)

export default function Loading() {
  return <div className="...">Skeleton o spinner</div>;
}

error.tsx (Client Component — obligatorio)

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Reintentar</button>
    </div>
  );
}

Reglas de calidad

• Verificar sesión en todas las páginas protegidas — sin excepciones
• user_id solo se filtra en el servidor (RLS activada, pero igual verificar)
• Tipos de Supabase desde @/lib/supabase/types.ts — nunca any
• Rutas dinámicas: params es Promise en Next.js 15, siempre usar await params