next saas starter

Iniciador de SaaS Next.js

Esta es una plantilla inicial para crear una aplicación SaaS utilizando Next.js con soporte para autenticación, integración de Stripe para pagos y un panel para usuarios registrados.

Demostración: https://next-saas-start.vercel.app/

¿Por qué hice esto?

En 2020, realicé un curso llamado "React 2025" que mostraba cómo crear una aplicación SaaS con Next.js, Stripe y otras herramientas.

Bueno, estamos casi en 2025 y React 19 ha traído tantas características nuevas e increíbles que no predije. Este repositorio es una demostración de los últimos patrones de React y Next.js. Estos patrones pueden simplificar drásticamente algunas tareas comunes en la creación de su SaaS, como crear formularios, comunicarse con su base de datos y más.

Por ejemplo, React ahora tiene ganchos integrados como useActionState para manejar errores de formulario en línea y estados pendientes. Las acciones de React Server pueden reemplazar una gran cantidad de código repetitivo necesario para llamar a una ruta API desde el lado del cliente. Y finalmente, el gancho use de React combinado con Next.js hace que sea increíblemente fácil crear un potente gancho useUser() .

Podemos recuperar al usuario de nuestra base de datos Postgres en el diseño raíz, pero no esperar la Promise . En su lugar, reenviamos la Promise a un proveedor de contexto de React, donde podemos "desenvolverla" y esperar los datos transmitidos. Esto significa que podemos tener lo mejor de ambos mundos: código sencillo para recuperar datos de nuestra base de datos (por ejemplo, getUser() ) y un gancho de React que podemos usar en los componentes del cliente (por ejemplo, useUser() ).

Dato curioso: ¿la mayor parte de la interfaz de usuario de esta aplicación se creó con la versión 0? Más detalles aquí si desea obtener más información sobre este repositorio.

Características

• Página de inicio de marketing ( / ) con elemento Terminal animado
• Página de precios ( /pricing ) que conecta con Stripe Checkout
• Páginas del panel con operaciones CRUD en usuarios/equipos
• RBAC básico con roles de propietario y miembro
• Gestión de suscripciones con Stripe Customer Portal
• Autenticación de correo electrónico/contraseña con JWT almacenados en cookies
• Middleware global para proteger las rutas iniciadas
• Middleware local para proteger acciones del servidor o validar esquemas Zod
• Sistema de registro de actividad para cualquier evento de usuario.

Pila de tecnología

• Marco : Siguiente.js
• Base de datos : Postgres
• ORM : llovizna
• Pagos : Raya
• Biblioteca de interfaz de usuario : shadcn/ui

Empezando

git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install

Ejecutando localmente

Utilice el script de configuración incluido para crear su archivo .env :

pnpm db:setup

Luego, ejecute las migraciones de la base de datos y inicialice la base de datos con un usuario y equipo predeterminados:

pnpm db:migrate
pnpm db:seed

Esto creará el siguiente usuario y equipo:

• Usuario: [email protected]
• Contraseña: admin123

Por supuesto, también puedes crear nuevos usuarios a través de /sign-up .

Finalmente, ejecute el servidor de desarrollo Next.js:

pnpm dev

Abra http://localhost:3000 en su navegador para ver la aplicación en acción.

Opcionalmente, puede escuchar los webhooks de Stripe localmente a través de su CLI para manejar eventos de cambio de suscripción:

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

Pagos de prueba

Para probar los pagos de Stripe, utilice los siguientes datos de la tarjeta de prueba:

• Número de tarjeta: 4242 4242 4242 4242
• Vencimiento: Cualquier fecha futura
• CVC: cualquier número de 3 dígitos

Ir a producción

Cuando esté listo para implementar su aplicación SaaS en producción, siga estos pasos:

Configurar un webhook de Stripe de producción

1. Vaya al Panel de Stripe y cree un nuevo webhook para su entorno de producción.
2. Configure la URL del punto final para su ruta API de producción (por ejemplo, https://yourdomain.com/api/stripe/webhook ).
3. Seleccione los eventos que desea escuchar (por ejemplo, checkout.session.completed , customer.subscription.updated ).

Implementar en Vercel

1. Envíe su código a un repositorio de GitHub.
2. Conecte su repositorio a Vercel e impleméntelo.
3. Siga el proceso de implementación de Vercel, que lo guiará en la configuración de su proyecto.

Agregar variables de entorno

En la configuración de su proyecto Vercel (o durante la implementación), agregue todas las variables de entorno necesarias. Asegúrese de actualizar los valores para el entorno de producción, incluidos:

1. BASE_URL : configúrelo en su dominio de producción.
2. STRIPE_SECRET_KEY : utilice su clave secreta de Stripe para el entorno de producción.
3. STRIPE_WEBHOOK_SECRET : utilice el secreto del webhook del webhook de producción que creó en el paso 1.
4. POSTGRES_URL : establezca esto en la URL de su base de datos de producción.
5. AUTH_SECRET : establezca esto en una cadena aleatoria. openssl rand -base64 32 generará uno.

Otras plantillas

Si bien esta plantilla es intencionalmente mínima y está destinada a usarse como recurso de aprendizaje, existen otras versiones pagas en la comunidad que tienen más funciones:

• https://acromático.dev
• https://shipfa.st
• https://makerkit.dev