# Cómo construir una aplicación SaaS moderna con Next.js Next.js es un poderoso marco de React que hace que la construcción de aplicaciones web modernas sea más simple y eficiente. En este artículo, te guiaremos a través de un tutorial completo sobre cómo usar Next.js para construir una simple aplicación SaaS. Cubriremos todo el proceso, desde la configuración del entorno de desarrollo hasta la creación de funcionalidades básicas. ## 1. Preparación del entorno Antes de comenzar, necesitamos asegurarnos de que tu entorno de desarrollo esté listo. Por favor, sigue los siguientes pasos: ### 1.1 Instalar Node.js y npm Asegúrate de que Node.js y npm estén instalados en tu computadora. Puedes ejecutar los siguientes comandos en la terminal para verificar las versiones: ```bash node -v npm -v ``` Si aún no lo has instalado, puedes ir a [la página oficial de Node.js](https://nodejs.org/) para descargar e instalar. ### 1.2 Crear un proyecto Next.js Ejecuta el siguiente comando en la terminal para crear un nuevo proyecto Next.js: ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` Esto creará un nuevo proyecto llamado `my-saas-app` e instalará automáticamente las dependencias necesarias. ## 2. Estructura del proyecto En el directorio `my-saas-app`, verás la siguiente estructura básica: ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: Contiene las páginas de la aplicación. - **public/**: Contiene recursos públicos, como imágenes, íconos, etc. - **styles/**: Contiene archivos CSS. ## 3. Construir funcionalidades centrales En esta sección, implementaremos un simple sistema de registro e inicio de sesión de usuarios. ### 3.1 Configurar la base de datos En este ejemplo, utilizaremos Supabase como servicio backend. Por favor, sigue estos pasos: 1. Ve a [la página oficial de Supabase](https://supabase.io/) y crea una cuenta. 2. Crea un nuevo proyecto y anota tu URL de base de datos y clave API. 3. Conéctate a la base de datos y crea la siguiente tabla de usuarios: ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Instalar el cliente de Supabase Instala la biblioteca del cliente de Supabase en el proyecto Next.js: ```bash npm install @supabase/supabase-js ``` ### 3.3 Crear la página de registro de usuarios En el directorio `pages/`, crea un nuevo archivo `register.js` y agrega el siguiente contenido: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Register = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleRegister = async () => { const { user, error } = await supabase.auth.signUp({ email, password, }); if (error) { console.error(error); } else { alert('¡Registro exitoso!'); } }; return ( ); }; export default Register; ``` ### 3.4 Crear la página de inicio de sesión de usuarios De igual manera, en el directorio `pages/`, crea un nuevo archivo `login.js` y agrega el siguiente contenido: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = async () => { const { user, error } = await supabase.auth.signIn({ email, password, }); if (error) { console.error(error); } else { alert('¡Inicio de sesión exitoso!'); } }; return ( ); }; export default Login; ``` ## 4. Desplegar la aplicación ### 4.1 Elegir plataforma de despliegue Usamos Vercel para desplegar nuestra aplicación Next.js. Por favor, sigue estos pasos: 1. Ve a [la página oficial de Vercel](https://vercel.com/) y regístrate para obtener una cuenta. 2. Crea un nuevo proyecto y selecciona tu repositorio de GitHub. 3. Asegúrate de agregar la URL de Supabase y la clave API en las variables de entorno. 4. Haz clic en desplegar y espera a que Vercel complete el despliegue. ### 4.2 Verificar el despliegue Una vez completado el despliegue, recibirás una URL pública. Accede a esta URL para asegurarte de que la aplicación funcione correctamente. ## 5. Resumen A través de los pasos de este artículo, has construido con éxito una simple aplicación SaaS utilizando Next.js, incluyendo funcionalidades de registro e inicio de sesión de usuarios. La fortaleza de Next.js radica en su flexibilidad y eficiencia, permitiendo una fácil expansión para satisfacer necesidades más complejas. ¡Esperamos que puedas profundizar en esta base y construir más aplicaciones impresionantes!