Conectar la base de datos de Supabase a una pantalla atractiva creada con v0
makedreamMay 6, 2026
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
v0 de Vercel dibuja una pantalla fantástica de Next.js en un abrir y cerrar de ojos, pero si la dejas ahí, no será más que un cascarón inútil. En el momento en que se pulsa actualizar, los datos introducidos por el usuario desaparecen sin dejar rastro. Para crear un servicio que realmente funcione, se necesita una base de datos donde almacenar la información.
Hemos resumido los pasos para eliminar los datos simulados (mock data) de v0 y conectar Supabase por tu cuenta para completar un backend funcional, sin tener que gastar miles de dólares contratando a un desarrollador.
Dentro del código generado por v0, suele haber datos simulados en formato const mockData = [...]. El primer paso consiste en comprender la estructura de estos datos. Debes trasladar la información que se muestra en la pantalla y los campos que introduce el usuario directamente a las tablas de la base de datos.
Para evitar que la estructura de datos se complique y se guarden valores incorrectos, es necesario definir claramente los tipos de datos. No necesitas saber SQL; puedes diseñar tus tablas con solo conocer estas cinco reglas:
uuid de PostgreSQL y configúralo con el valor por defecto gen_random_uuid() para que se genere automáticamente una cadena de texto única.text y activa las configuraciones UNIQUE (para evitar registros duplicados) y NOT NULL (para impedir que se guarden valores vacíos).numeric.text, pero limítalo para que solo admita valores específicos como "espera" o "completado".timestamptz, que guarda la información con la zona horaria incluida, e introduce now() como valor predeterminado para que se registre la hora exacta en el momento en que ingresan los datos.Supabase te ayuda a crear bases de datos con unos pocos clics en el navegador web, sin necesidad de configurar una compleja infraestructura de servidores.
messages o users y añade las columnas necesarias siguiendo los criterios de asignación anteriores.Una vez creada la base de datos, debes abrir una vía de comunicación entre la carpeta de tu proyecto de Next.js y Supabase. En este punto, si la clave privada del administrador de la base de datos se filtra en un lugar público como GitHub, todo el servicio quedará fuera de control. Esta es la razón por la que debes almacenar las variables de entorno por separado.
Crea un archivo .env.local en la carpeta raíz de tu proyecto de Next.js e introduce el siguiente código. Copia la dirección y los valores de las claves desde la página Settings > API en el panel de control de Supabase.