App Router: Configuración de tu base de datos

Antes de continuar trabajando en tu panel de control, necesitarás algunos datos. En este capítulo, configurarás una base de datos PostgreSQL utilizando una de las integraciones del marketplace de Vercel. Si ya estás familiarizado con PostgreSQL y prefieres usar tu propio proveedor de base de datos, puedes saltarte este capítulo y configurarlo por tu cuenta. De lo contrario, ¡continuemos!

Crear un repositorio en GitHub

Para comenzar, sube tu repositorio a GitHub si aún no lo has hecho. Esto facilitará la configuración de tu base de datos y el despliegue.

Si necesitas ayuda para configurar tu repositorio, consulta esta guía en GitHub.

Nota importante:

También puedes usar otros proveedores de git como GitLab o Bitbucket.

Si eres nuevo en GitHub, recomendamos la aplicación GitHub Desktop para un flujo de trabajo de desarrollo simplificado.

Crear una cuenta en Vercel

Visita vercel.com/signup para crear una cuenta. Elige el plan gratuito "hobby". Selecciona Continuar con GitHub para conectar tus cuentas de GitHub y Vercel.

Conectar y desplegar tu proyecto

A continuación, serás llevado a esta pantalla donde puedes seleccionar e importar el repositorio de GitHub que acabas de crear:

Captura de pantalla del Dashboard de Vercel, mostrando la pantalla de importación de proyectos con una lista de los repositorios GitHub del usuario

Nombra tu proyecto y haz clic en Desplegar.

Pantalla de despliegue mostrando el campo de nombre del proyecto y un botón de despliegue

¡Enhorabuena! 🎉 Tu proyecto ya está desplegado.

Pantalla de resumen del proyecto mostrando el nombre del proyecto, dominio y estado del despliegue

Al conectar tu repositorio de GitHub, cada vez que hagas push a tu rama main, Vercel volverá a desplegar tu aplicación automáticamente sin necesidad de configuración. Al abrir pull requests, también tendrás URLs de vista previa instantánea que te permitirán detectar errores de despliegue temprano y compartir una vista previa de tu proyecto con miembros del equipo para recibir comentarios.

Crear una base de datos Postgres

A continuación, para configurar una base de datos, haz clic en Continuar al Dashboard y selecciona la pestaña Storage desde el dashboard de tu proyecto. Selecciona Crear base de datos. Dependiendo de cuándo se creó tu cuenta de Vercel, puedes ver opciones como Neon o Supabase. Elige tu proveedor preferido y haz clic en Continuar.

Pantalla Connect Store mostrando la opción Postgres junto con KV, Blob y Edge Config

Elige tu región y plan de almacenamiento, si es requerido. La región por defecto para todos los proyectos de Vercel es Washington D.C (iad1), y recomendamos elegir esta si está disponible para reducir la latencia en las solicitudes de datos.

Modal de creación de base de datos mostrando el nombre de la base de datos y la región

Una vez conectado, navega a la pestaña .env.local, haz clic en Mostrar secreto y Copiar fragmento. Asegúrate de revelar los secretos antes de copiarlos.

La pestaña .env.local mostrando los secretos ocultos de la base de datos

Navega a tu editor de código y renombra el archivo .env.example a .env. Pega el contenido copiado desde Vercel.

Importante: Ve a tu archivo .gitignore y asegúrate de que .env esté en los archivos ignorados para evitar que tus secretos de base de datos sean expuestos cuando hagas push a GitHub.

Llenar tu base de datos con datos iniciales

Ahora que tu base de datos ha sido creada, vamos a llenarla con algunos datos iniciales.

Hemos incluido una API a la que puedes acceder en el navegador, que ejecutará un script de llenado para poblar la base de datos con un conjunto inicial de datos.

El script usa SQL para crear las tablas, y los datos del archivo placeholder-data.ts para llenarlas después de que hayan sido creadas.

Asegúrate de que tu servidor de desarrollo local esté ejecutándose con pnpm run dev y navega a localhost:3000/seed en tu navegador. Cuando termine, verás un mensaje "Base de datos llenada exitosamente" en el navegador. Una vez completado, puedes eliminar este archivo.

Solución de problemas:

Asegúrate de revelar tus secretos de base de datos antes de copiarlos en tu archivo .env.

El script usa bcrypt para hashear la contraseña del usuario, si bcrypt no es compatible con tu entorno, puedes actualizar el script para usar bcryptjs en su lugar.

Si encuentras algún problema mientras llenas tu base de datos y quieres ejecutar el script nuevamente, puedes eliminar cualquier tabla existente ejecutando DROP TABLE nombredetabla en tu interfaz de consulta de base de datos. Consulta la sección de ejecución de consultas a continuación para más detalles. Pero ten cuidado, este comando eliminará las tablas y todos sus datos. Está bien hacer esto con tu aplicación de ejemplo ya que estás trabajando con datos de ejemplo, pero no deberías ejecutar este comando en una aplicación en producción.

Ejecución de consultas

Ejecutemos una consulta para asegurarnos de que todo funciona como se espera. Usaremos otro Router Handler, app/query/route.ts, para consultar la base de datos. Dentro de este archivo, encontrarás una función listInvoices() que tiene la siguiente consulta SQL.

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

Descomenta el archivo, elimina el bloque Response.json(), y navega a localhost:3000/query en tu navegador. Deberías ver que se devuelve un amount de factura y un name.