Create Page

Skill: Create Page

Estructura de archivos por ruta

Cada ruta nueva DEBE crear estos archivos:

src/app/(dashboard)/[...ruta]/
├── page.tsx          # Server Component async (OBLIGATORIO)
├── loading.tsx       # Skeleton de carga (OBLIGATORIO)
├── error.tsx         # Error boundary (OBLIGATORIO)
└── layout.tsx        # Solo si la ruta necesita contexto compartido (OPCIONAL)

Plantilla page.tsx (Server Component)

import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import { createServerClient } from '@/lib/supabase/server';
import { queryKeys } from '@/lib/query/keys';
import { NombreView } from '@/components/nombre/NombreView';
import type { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  return { title: 'Título | Kiyoko AI' };
}

export default async function NombrePage({
  params,
}: {
  params: Promise<{ shortId: string }>;
}) {
  const { shortId } = await params;
  const supabase = await createServerClient();
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: queryKeys.recurso.detail(shortId),
    queryFn: async () => {
      const { data, error } = await supabase.from('tabla').select('*').eq('short_id', shortId).single();
      if (error) throw error;
      return data;
    },
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <NombreView shortId={shortId} />
    </HydrationBoundary>
  );
}