Cómo usar v0 de Vercel: tutorial para principiantes con capturas
Un recorrido completo por v0.dev, reconstruido a partir de una creación real de principiante — Enhanced Prompt, selector de elementos, versiones, despliegue en Vercel con un clic, sincronización con GitHub y base de datos Supabase con inicio de sesión. Cada paso con captura de pantalla.
v0 en corto
- v0.dev es el constructor con IA de Vercel: describes la app en lenguaje natural (o adjuntas una captura o archivo Figma) y genera una app Next.js funcionando, con vista previa y código lado a lado.
- Usa Enhanced Prompt cuando la idea sea floja, el selector de elementos para retocar un componente concreto y la lista de versiones para deshacer cualquier iteración fallida.
- El despliegue es un clic hacia Vercel y la sincronización con GitHub envía cada cambio a tu repositorio — tu código nunca queda encerrado en v0.
- Los datos de verdad llegan con la integración de Supabase: crea la base desde los ajustes de v0, deja que v0 ejecute su script SQL (borra antes la línea del JWT) y tu app gana inicio de sesión por correo con datos por usuario.
How to use v0.dev by Vercel For Beginners
Vídeo original de:Code with Nathan12:28
Las capturas proceden del vídeo original y llevan crédito con enlaces por minuto exacto. El texto es redacción propia basada en la transcripción completa; los hechos coinciden con el vídeo.
Este tutorial es un resumen ilustrado e independiente para quien prefiere leer. Para apoyar al creador, mira el vídeo original del canal Code with Nathan, enlazado arriba.
Crea una app en v0, paso a paso
- 1
Empieza en v0.dev
Crea una cuenta gratuita en v0.dev. La barra lateral guarda tus chats y proyectos; el gran cuadro de prompt del centro es el punto de partida. Alrededor hay acciones rápidas — clonar una captura, importar de Figma, landing pages — y el botón de adjuntar acepta imágenes y archivos Figma como entrada de diseño.
El compositor de v0.dev con acciones rápidas y selector de modelo.Ver en 2:00 - 2
Amplía tu idea con Enhanced Prompt
«Una app de notas» le da poco con qué trabajar a v0. El botón Enhanced Prompt lo reescribe con funciones clave, autenticación de usuario y diseño responsive. Sáltatelo si tu prompt ya está detallado — la ampliación también puede desviar la app de lo que tenías en mente. Para la interfaz del día a día, el modelo medium es el valor por defecto económico; deja el large para creaciones complejas.
Enhanced Prompt convierte una línea en una especificación de verdad.Ver en 2:15 - 3
Explora los proyectos de la comunidad
Bajo el compositor, la galería de la comunidad enseña lo que otros han construido — portafolios, landing pages, experimentos juguetones. Open in v0 copia cualquiera a tu cuenta, donde puedes inspeccionar el código o doblarlo a tus necesidades. Más rápido que empezar de cero si ya existe algo parecido.
La galería de la comunidad: Open in v0 copia el proyecto a tu cuenta.Ver en 3:00 - 4
Genera tu app
El prompt de la demo: «una app de notas basada en markdown con carpetas, etiquetas, búsqueda y resaltado de sintaxis.» Enter, y v0 planifica y luego va escribiendo el código en la vista Code, donde ves los archivos nacer en directo. Un minuto más tarde la app terminada espera en la vista previa.
v0 transmitiendo app/page.tsx durante la generación.Ver en 4:00 - 5
Pruébala en la vista previa
Úsala como un usuario real antes de cambiar nada: edita el título y el texto de una nota, crea notas en carpetas, borra una, busca en la lista. Encontrar los huecos ahora significa un prompt de seguimiento preciso en lugar de cinco vagos más tarde.
Editando el título de una nota en el panel de vista previa.Ver en 4:30 - 6
Restila un elemento con el selector
El botón de borrar se pierde entre la barra de herramientas — pulsa el icono del selector, elige el elemento y promptea solo sobre él: «ponle fondo rojo a este botón de borrar.» v0 limita el cambio exactamente a ese componente en lugar de regenerar la página — todo lo demás queda estable.
El selector de elementos acota el prompt a un solo componente.Ver en 9:00 - 7
Vuelve atrás con las versiones
Cada generación conserva su versión. Abre el desplegable de versiones para comparar y Restore recupera un estado anterior cuando una iteración sale torcida — la red de seguridad que hace barato promptear con agresividad.
La tarjeta de restauración de la versión 2 — los estados anteriores a un clic.Ver en 5:25 - 8
Despliega en Vercel
El botón Deploy empuja la app directamente a Vercel: el registro de compilación corre, se asignan dominios y un minuto después tu app tiene URL pública. Los cambios siguientes se redespliegan con un clic desde el mismo menú.
De la vista previa a la URL en línea en un clic.Ver en 6:00 - 9
Sincroniza con GitHub
Pulsa el icono de GitHub, autoriza a v0, nombra el repositorio y créalo. Desde entonces, cada cambio por prompt se envía a una rama de tu repositorio — y siempre puedes descargar el código en zip o traerlo con npx. Nada queda encerrado en v0.
Crear el repositorio de GitHub al que v0 enviará los cambios.Ver en 7:00 - 10
Conecta Supabase
Los datos en el navegador mueren con el navegador. Abre Settings → Integrations → Supabase, acepta, elige región y el plan gratuito, y crea la base de datos. v0 la vincula automáticamente a tu proyecto de Vercel — sin saltar entre paneles.
El diálogo Create Database de Supabase dentro de v0.Ver en 8:30 - 11
Añade inicio de sesión por correo
Prompt: «Crea un sistema de autenticación con correo y contraseña y guarda todos los datos en Supabase.» v0 genera las páginas de acceso y registro más un script SQL que crea las tablas y las políticas de seguridad. Ahora mismo los datos viven en el localStorage — con este paso pasan a una base de datos de verdad.
v0 planifica el sistema de autenticación y prepara su script SQL.Ver en 9:10 - 12
Ejecuta el script SQL — borra antes la línea del JWT
Una trampa que el vídeo señala: si el script contiene una línea que define app.jwt_secret, bórrala antes de ejecutar — provoca un error porque el secreto ya quedó configurado al crear Supabase. Luego ejecuta el script (Apply en v0) para crear las tablas folders, notes y sus políticas.
El script de creación de tablas, sin la línea del JWT, listo para ejecutar.Ver en 9:30 - 13
Verifica tus datos en producción
Regístrate en la vista previa, crea notas en carpetas y vuelve a abrir desde otro navegador — todo persiste. Tus datos viven en tablas de Supabase, aislados por usuario, y la app es un producto full-stack de verdad: front generado por prompts, base de datos vía integración, desplegada en Vercel.
Sesión iniciada y notas que persisten en Supabase.Ver en 10:10