EmpiezaTuSaaS

Lanzar en 5 minutos

Tutorial paso a paso con capturas para tener tu SaaS funcionando en 5 minutos

Lanzar en 5 minutos

Sigue este tutorial paso a paso para tener tu SaaS completamente funcional. No necesitas experiencia previa.

Al final tendrás:

  • Landing page profesional
  • Login con Google
  • Pagos con Stripe
  • Panel de usuario y admin
  • Desplegado en producción

Requisitos: Node.js 18+, una cuenta de GitHub y una terminal (Terminal en Mac, PowerShell en Windows).

1. Clona e instala el proyecto

Abre tu terminal y ejecuta estos 3 comandos:

git clone https://github.com/victorgxn/empiezatusaas-boilerplate.git mi-saas
cd mi-saas
npm install
  • git clone — descarga el código del boilerplate en una carpeta llamada mi-saas (puedes cambiar el nombre)
  • cd mi-saas — entra en la carpeta del proyecto
  • npm install — instala todas las dependencias (tarda 1-2 minutos)

Si npm install da errores de dependencias, usa npm install --legacy-peer-deps.

2. Configura las variables de entorno

Copia el archivo de ejemplo:

cp .env.example .env

Esto crea un archivo .env con todas las variables que necesitas rellenar. Vamos una por una.

3. Base de datos (Neon)

Necesitas una base de datos PostgreSQL. Usaremos Neon porque es gratis y se configura en 1 minuto.

Crea una cuenta en Neon

Ve a neon.tech y regístrate (puedes usar tu cuenta de GitHub).

Crea un nuevo proyecto

Haz click en "Create project". Ponle el nombre que quieras (ej: mi-saas).

Copia el connection string

Neon te mostrará un connection string que empieza por postgresql://. Cópialo entero.

Pégalo en tu .env

Abre el archivo .env y busca la línea DATABASE_URL. Pega tu connection string:

.env
DATABASE_URL="postgresql://tu-usuario:tu-password@ep-xxx.region.aws.neon.tech/neondb?sslmode=require"

4. Auth secret

Better Auth necesita un secreto para firmar los tokens de sesión. Genera uno ejecutando esto en tu terminal:

openssl rand -base64 32

Copia el resultado y pégalo en tu .env:

.env
BETTER_AUTH_SECRET="el-string-que-te-generó-openssl"
BETTER_AUTH_URL=http://localhost:3000

5. Crea las tablas en la base de datos

Ejecuta estos 2 comandos para crear las tablas que necesita el proyecto:

npx prisma generate
npx prisma db push
  • prisma generate — genera el cliente de Prisma para que tu código pueda hablar con la base de datos
  • prisma db push — crea las tablas: User, Session, Account, Verification y Subscription

¿Atascado? Pasa capturas de tu error a ChatGPT o pregunta en el Discord de EmpiezaTuSaaS.

6. Arranca el proyecto

npm run dev

Abre http://localhost:3000 en tu navegador. Deberías ver tu landing page funcionando.

Ya tienes la landing page, la base de datos y la autenticación básica (email/password) funcionando. Los siguientes pasos son opcionales pero recomendados.

7. Google OAuth (login con Google)

Crea un proyecto en Google Cloud

  1. Ve a Google Cloud Console
  2. Crea un proyecto nuevo (o usa uno existente)
  3. Ve a Credentials → Create Credentials → OAuth client ID
  4. Tipo: Web application

Configura las URLs

Authorized JavaScript origins:
http://localhost:3000

Authorized redirect URIs:
http://localhost:3000/api/auth/callback/google

Añade las credenciales a tu .env

.env
GOOGLE_CLIENT_ID="tu-client-id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="tu-client-secret"

Prueba el login

  1. Ve a http://localhost:3000
  2. Click en "Iniciar sesión"
  3. Click en "Continuar con Google"
  4. Deberías ver la página de pricing (necesitas pagar para acceder al dashboard)

¿Atascado? Pasa capturas de tu error a ChatGPT o pregunta en el Discord de EmpiezaTuSaaS.

8. Pagos con Stripe

Tip: Si usas Cursor, Windsurf o Claude Code, puedes instalar el MCP de Stripe para crear productos, precios y webhooks directamente desde tu editor con IA — sin tocar el dashboard.

Obtén tus claves de Stripe

  1. Ve a dashboard.stripe.com
  2. Activa el modo test (toggle arriba a la derecha)
  3. Ve a Developers → API keys
  4. Copia la Publishable key y Secret key

Crea tus productos

En Stripe Dashboard → Products → Add product:

ProductoPrecioTipo
Starter49 EUROne-time (pago único)
Pro99 EUROne-time (pago único)
Lifetime199 EUROne-time (pago único)

Copia los Price IDs de cada producto (empiezan con price_).

Configura el webhook

  1. Ve a Developers → Webhooks → Add endpoint
  2. URL: https://tu-dominio.vercel.app/api/stripe/webhooks
  3. Eventos: checkout.session.completed, customer.subscription.created, customer.subscription.updated, customer.subscription.deleted, invoice.paid, invoice.payment_failed
  4. Copia el Webhook signing secret

Para desarrollo local usa Stripe CLI:

stripe listen --forward-to localhost:3000/api/stripe/webhooks

Añade las variables de Stripe a tu .env

.env
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

STRIPE_PRICE_ID_STARTER=price_...
STRIPE_PRICE_ID_PRO=price_...
STRIPE_PRICE_ID_LIFETIME=price_...

Prueba un pago

  1. Inicia sesión en tu app
  2. Verás la página de pricing (paywall)
  3. Elige un plan y usa la tarjeta de prueba: 4242 4242 4242 4242 (cualquier fecha futura, cualquier CVC)
  4. Después de pagar, verás el dashboard completo

¿Atascado? Pasa capturas de tu error a ChatGPT o pregunta en el Discord de EmpiezaTuSaaS.

9. Emails con Resend

Obtén tu API key

  1. Ve a resend.com y crea una cuenta
  2. Ve a API Keys → Create API Key
  3. Copia la key

Verifica tu dominio

  1. En Resend, ve a Domains → Add Domain
  2. Escribe tu dominio (ej: tusaas.com)
  3. Resend te dará registros DNS (TXT y MX) — añádelos en tu proveedor de dominio (Cloudflare, Namecheap, etc.)
  4. Espera a que se verifique (puede tardar unos minutos)

Añade las variables a tu .env

.env
RESEND_API_KEY=re_...

Configura los emails en tu app

Edita config/site.ts con los emails de tu dominio verificado:

config/site.ts
supportEmail: "soporte@tusaas.com",   // Donde recibes notificaciones
noReplyEmail: "noreply@tusaas.com",   // Remitente de emails automáticos

En desarrollo puedes usar delivered@resend.dev como remitente sin verificar dominio. Para producción necesitas tu dominio verificado.

¿Atascado? Pasa capturas de tu error a ChatGPT o pregunta en el Discord de EmpiezaTuSaaS.

10. Personaliza tu marca

Edita config/site.ts con los datos de tu proyecto:

config/site.ts
export const siteConfig = {
  name: "Tu SaaS",
  description: "La descripción de tu producto",
  domain: "tusaas.com",
  url: process.env.NEXT_PUBLIC_APP_URL || "https://tusaas.com",
  supportEmail: "soporte@tusaas.com",
  noReplyEmail: "noreply@tusaas.com",
};

Checklist final

PasoVerificación
Proyecto clonadonpm run dev funciona sin errores
Base de datosNeon conectado, tablas creadas
AuthLogin con Google funciona
PaywallDespués de login ves la página de pricing
PagosPago con tarjeta test 4242 4242 4242 4242 funciona
DashboardDespués de pagar ves el dashboard
EmailsRecibes email de bienvenida al registrarte

¿Atascado? Pasa capturas de tu error a ChatGPT o pregunta en el Discord de EmpiezaTuSaaS.

EmpiezaTuSaaS

El boilerplate definitivo para lanzar tu SaaS en tiempo récord con Next.js, autenticación, pagos y más.

On this page

Lanzar en 5 minutos1. Clona e instala el proyecto2. Configura las variables de entorno3. Base de datos (Neon)Crea una cuenta en NeonCrea un nuevo proyectoCopia el connection stringPégalo en tu .env4. Auth secret5. Crea las tablas en la base de datos6. Arranca el proyecto7. Google OAuth (login con Google)Crea un proyecto en Google CloudConfigura las URLsAñade las credenciales a tu .envPrueba el login8. Pagos con StripeObtén tus claves de StripeCrea tus productosConfigura el webhookAñade las variables de Stripe a tu .envPrueba un pago9. Emails con ResendObtén tu API keyVerifica tu dominioAñade las variables a tu .envConfigura los emails en tu app10. Personaliza tu marcaChecklist final