Documentación
← docs

Estructura del proyecto

Mapa completo del código de Shipabase: qué hay en cada carpeta, dónde viven los helpers de Supabase y Stripe, y los conceptos clave del App Router.

Mapa de carpetas

shipabase/
├── app/                          # Next.js App Router
│   ├── [contentType]/            # Listado de contenido (ej. /blog, /docs)
│   │   ├── [slug]/               # Post individual (ej. /blog/hello-world)
│   │   └── layout.tsx            # Menú lateral para tipos en SIDEBAR_TYPES
│   ├── account/                  # Gestión de cuenta del usuario
│   ├── api/
│   │   └── webhooks/             # Webhooks de Stripe
│   ├── llms.txt/                 # Índice para crawlers de LLMs (auto)
│   ├── robots.ts                 # robots.txt (auto)
│   ├── sitemap.ts                # sitemap.xml (auto)
│   ├── layout.tsx                # Layout raíz
│   └── page.tsx                  # Landing page
├── content/                      # Módulo de contenido MDX
│   ├── blog/                     # Posts del blog (.mdx)
│   ├── docs/                     # Páginas de docs (.mdx), con menú lateral
│   └── content.ts                # Tipos, helpers y config del menú lateral
├── components/
│   └── ui/                       # Componentes de UI
│       ├── Auth/                 # Formularios de autenticación
│       ├── Account/              # Gestión de cuenta
│       ├── Pricing/              # Tarjetas de precios
│       ├── ContentSidebar/       # Menú lateral de docs
│       ├── Hero/  Features/  FAQ/  Navbar/
├── utils/
│   ├── supabase/
│   │   ├── client.ts             # Cliente para el navegador
│   │   ├── server.ts             # Cliente para Server Components
│   │   ├── middleware.ts         # Cliente para el middleware
│   │   ├── admin.ts              # Operaciones admin (service role)
│   │   └── queries.ts            # Consultas a la base de datos
│   ├── stripe/
│   │   ├── config.ts             # Instancia de Stripe
│   │   ├── client.ts             # Helpers de cliente
│   │   └── server.ts             # Server actions (checkout, portal)
│   └── auth-helpers/
│       └── access.ts             # requireAuth() y requireAccess()
├── supabase/
│   └── migrations/init.sql       # Esquema de la base de datos
├── scripts/
│   └── check-env.mjs             # Preflight check (npm run check)
├── styles/                       # CSS global y tokens de tema
└── types_db.ts                   # Tipos generados de la DB

Conceptos clave

Server Components vs Client Components

  • Server Components (por defecto): para fetching de datos y rutas protegidas. Pueden usar el cliente de Supabase de servidor directamente.
  • Client Components ('use client'): para interactividad, formularios y estado.

Los tres clientes de Supabase

Cada contexto de Next.js necesita su propio cliente, y los tres ya vienen configurados:

  • utils/supabase/client.ts — en el navegador (Client Components)
  • utils/supabase/server.ts — en Server Components y server actions
  • utils/supabase/middleware.ts — en el middleware de autenticación

La regla: nunca importes el cliente de servidor en un componente cliente, ni al revés. Y admin.ts (que usa la service role key) solo se usa en los webhooks.

Siguiente paso

Aprende cómo funciona la Autenticación.