Como usar o v0 da Vercel: tutorial para iniciantes com capturas de tela
Um passeio completo pelo v0.dev, reconstruído a partir de uma criação real de iniciante — Enhanced Prompt, seletor de elementos, versões, implantação na Vercel com um clique, sincronização com GitHub e banco de dados Supabase com login. Cada passo com captura de tela.
v0 em resumo
- O v0.dev é o construtor com IA da Vercel: descreva o app em linguagem natural (ou anexe uma captura ou arquivo Figma) e ele gera um app Next.js funcionando, com pré-visualização e código lado a lado.
- Use o Enhanced Prompt quando a ideia for rasa, o seletor de elementos para ajustar um componente específico e a lista de versões para reverter qualquer iteração que der errado.
- A implantação é um clique para a Vercel, e a sincronização com GitHub envia cada mudança para o seu repositório — seu código nunca fica preso no v0.
- Dados de verdade vêm com a integração Supabase: crie o banco nas configurações do v0, deixe o v0 rodar o script SQL (apague antes a linha do JWT) e seu app ganha login por e-mail com dados por usuário.
How to use v0.dev by Vercel For Beginners
Vídeo original de:Code with Nathan12:28
As capturas de tela vêm do vídeo original e são creditadas com links de marcação de tempo. O texto é redação própria baseada na transcrição completa — os fatos correspondem ao vídeo.
Este tutorial é um resumo ilustrado e independente para quem prefere ler. Para apoiar o criador, assista ao vídeo original no canal Code with Nathan, ligado acima.
Crie um app no v0, passo a passo
- 1
Comece no v0.dev
Crie uma conta gratuita no v0.dev. A barra lateral guarda seus chats e projetos; a grande caixa de prompt no centro é o ponto de partida. Ao redor ficam as ações rápidas — clonar uma captura, importar do Figma, landing pages — e o botão de anexo aceita imagens e arquivos Figma como entrada de design.
O compositor do v0.dev com ações rápidas e seletor de modelo.Ver em 2:00 - 2
Expanda a ideia com o Enhanced Prompt
"Um app de notas" dá pouco para o v0 trabalhar. O botão Enhanced Prompt o reescreve com funções principais, autenticação de usuário e design responsivo. Pule se seu prompt já for detalhado — a expansão também pode desviar o app do que você imaginou. Para a interface do dia a dia, o modelo medium é o padrão econômico; deixe o large para construções complexas.
O Enhanced Prompt transforma uma linha numa especificação de verdade.Ver em 2:15 - 3
Explore os projetos da comunidade
Abaixo do compositor, a galeria da comunidade mostra o que outros construíram — portfólios, landing pages, experimentos divertidos. Open in v0 copia qualquer um para a sua conta, onde você pode inspecionar o código ou adaptá-lo. Mais rápido que começar do zero quando algo parecido já existe.
A galeria da comunidade: Open in v0 copia o projeto para você.Ver em 3:00 - 4
Gere seu aplicativo
O prompt da demo: "um app de notas baseado em markdown com pastas, etiquetas, busca e realce de sintaxe." Enter, e o v0 planeja e depois escreve o código em streaming na visualização Code, onde você vê os arquivos surgirem ao vivo. Um minuto depois, o app pronto está na pré-visualização.
O v0 transmitindo app/page.tsx durante a geração.Ver em 4:00 - 5
Teste na pré-visualização
Use o app como um usuário real antes de mudar qualquer coisa: edite o título e o texto de uma nota, crie notas em pastas, apague uma, busque na lista. Encontrar as falhas agora significa um prompt de acompanhamento preciso em vez de cinco vagos depois.
Editando o título de uma nota no painel de pré-visualização.Ver em 4:30 - 6
Ajuste um elemento com o seletor
O botão de excluir se mistura à barra de ferramentas — clique no ícone do seletor, escolha o elemento e faça o prompt só sobre ele: "use fundo vermelho neste botão de excluir." O v0 limita a mudança exatamente àquele componente em vez de regenerar a página — todo o resto permanece estável.
O seletor de elementos restringe o prompt a um único componente.Ver em 9:00 - 7
Volte atrás com as versões
Cada geração guarda sua versão. Abra o menu de versões para comparar, e o Restore traz um estado anterior de volta quando uma iteração desanda — a rede de proteção que torna o prompting agressivo barato.
O cartão de restauração da Versão 2 — estados antigos a um clique.Ver em 5:25 - 8
Implante na Vercel
O botão Deploy empurra o app direto para a Vercel: o log de build corre, os domínios são atribuídos e, um minuto depois, seu app tem uma URL pública. Mudanças futuras são reimplantadas com um clique pelo mesmo menu.
Da pré-visualização à URL no ar em um clique.Ver em 6:00 - 9
Sincronize com o GitHub
Clique no ícone do GitHub, autorize o v0, dê um nome ao repositório e crie. A partir daí, cada mudança por prompt é enviada para uma branch do seu repositório — e você sempre pode baixar o código em zip ou puxá-lo via npx. Nada fica preso no v0.
Criando o repositório do GitHub para o qual o v0 enviará mudanças.Ver em 7:00 - 10
Conecte o Supabase
Dados no navegador morrem com o navegador. Abra Settings → Integrations → Supabase, aceite, escolha região e o plano gratuito e crie o banco de dados. O v0 o vincula automaticamente ao seu projeto da Vercel — sem pular de painel em painel.
O diálogo Create Database do Supabase dentro do v0.Ver em 8:30 - 11
Adicione login por e-mail
Prompt: "Crie um sistema de autenticação com e-mail e senha e guarde todos os dados no Supabase." O v0 gera as páginas de login e cadastro mais um script SQL que cria as tabelas e as políticas de segurança. Neste momento, os dados vivem no localStorage — este passo os leva a um banco de verdade.
O v0 planeja o sistema de autenticação e prepara o script SQL.Ver em 9:10 - 12
Execute o script SQL — apague antes a linha do JWT
Uma armadilha que o vídeo destaca: se o script tiver uma linha definindo app.jwt_secret, apague-a antes de rodar — ela causa um erro, pois o segredo já foi configurado na criação do Supabase. Depois execute o script (Apply no v0) para criar as tabelas folders, notes e as políticas.
O script de criação de tabelas, sem a linha do JWT, pronto para executar.Ver em 9:30 - 13
Verifique seus dados no ar
Cadastre-se na pré-visualização, crie notas em pastas e reabra em outro navegador — tudo persiste. Seus dados vivem em tabelas do Supabase, isolados por usuário, e o app é um produto full-stack de verdade: front gerado por prompts, banco via integração, implantado na Vercel.
Sessão iniciada e notas persistindo no Supabase.Ver em 10:10