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/
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, es casi 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 poderoso 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.
/ ) con elemento Terminal animado/pricing ) que conecta con Stripe Checkoutgit clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install Utilice el script de configuración incluido para crear su archivo .env :
pnpm db:setupLuego, 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:seedEsto creará el siguiente usuario y equipo:
[email protected]admin123 Por supuesto, también puedes crear nuevos usuarios a través de /sign-up .
Finalmente, ejecute el servidor de desarrollo Next.js:
pnpm devAbra 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/webhookPara probar los pagos de Stripe, utilice los siguientes datos de la tarjeta de prueba:
4242 4242 4242 4242Cuando esté listo para implementar su aplicación SaaS en producción, siga estos pasos:
https://yourdomain.com/api/stripe/webhook ).checkout.session.completed , customer.subscription.updated ).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:
BASE_URL : configúrelo en su dominio de producción.STRIPE_SECRET_KEY : utilice su clave secreta de Stripe para el entorno de producción.STRIPE_WEBHOOK_SECRET : utilice el secreto del webhook del webhook de producción que creó en el paso 1.POSTGRES_URL : establezca esto en la URL de su base de datos de producción.AUTH_SECRET : establezca esto en una cadena aleatoria. openssl rand -base64 32 generará uno. 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:
