Shipabase es un boilerplate de Next.js listo para producción que combina autenticación con Supabase, pagos con Stripe y componentes modernos de React para que lances tu SaaS en minutos, no en meses.
Esta documentación te guía desde la instalación hasta el despliegue en producción. Si es tu primera vez, sigue las páginas en orden: Instalación → Variables de entorno → Base de datos → Configurar Stripe → Verificar la instalación.
Qué incluye
Autenticación
- Múltiples métodos: email/contraseña, proveedores OAuth y magic links
- Seguro por defecto: Supabase Auth con Row Level Security (RLS) en todas las tablas
- Recuperación de contraseña integrada
- Perfiles de usuario extensibles con campos personalizados
- Rutas protegidas con verificación automática en el middleware
Pagos y suscripciones
- Integración completa con Stripe: checkout y portal de facturación
- Suscripciones recurrentes con intervalos de facturación flexibles
- Webhooks que sincronizan Stripe con Supabase automáticamente
- Períodos de prueba configurables
- Portal de cliente: el usuario gestiona su suscripción sin que escribas una línea de código
Contenido y SEO
- Blog en MDX con frontmatter en JavaScript plano — sin CMS ni parsers
- Generación estática: todas las páginas de contenido se pre-renderizan en build
- Metadata dinámica: title, description, Open Graph y Twitter Cards por post
- JSON-LD: datos estructurados Schema.org para resultados enriquecidos en Google
- Sitemap, robots.txt y llms.txt generados automáticamente
- Sección de docs: páginas de documentación con menú lateral fijo, resaltado de página activa y orden manual
UI/UX
- Diseño moderno y responsive con Tailwind CSS
- Modo oscuro con next-themes
- Componentes accesibles con Radix UI
- Landing page pre-armada: Hero, Features, Pricing y FAQ
- Notificaciones con Sonner e internacionalización con next-intl (inglés y español incluidos)
Stack tecnológico
| Categoría | Tecnología |
|---|---|
| Framework | Next.js 14 (App Router) |
| Auth y base de datos | Supabase |
| Pagos | Stripe |
| Estilos | Tailwind CSS |
| Componentes UI | Radix UI |
| Internacionalización | next-intl |
| Contenido | @next/mdx |
| Lenguaje | TypeScript |
Siguiente paso
Empieza por la Instalación.