Construye y despliega una app Next.js con Claude, Vercel y Supabase

Una guía práctica para configurar Terminal, VS Code, GitHub, Claude Code, Vercel y Supabase — desde un blog simple con CMS hasta una app completa de gestión de tablas. Esta guía te lleva por cada herramienta con prompts de IA reales que puedes usar de inmediato.

Tool	Role	Free Tier
⌨️ Terminal	Local dev environment — shell, Node.js, Git, package manager	✓ Always free
VS Code	Editor + AI integration — extensions, workspace config, inline completions	✓ Always free
GitHub	Source control + CI/CD — branches, PRs, Actions workflows	✓ Unlimited public repos
Claude Code	AI pair programmer — reads your codebase, writes files, runs commands	✓ Free tier available
Supabase	DB + Auth + Storage — Postgres, Row Level Security, Realtime	✓ 2 projects, 500MB DB
Vercel	Hosting + CDN — auto-deploy on push, edge functions, preview URLs	✓ 100GB bandwidth/mo
Cloudflare	Edge hosting + CDN — Pages for static/SSR, Workers for serverless logic	✓ Unlimited requests
✦Penpot	UI design tool — open-source Figma alternative, design-to-code	✓ Always free
✦CodeSandbox	Cloud dev environment — open any GitHub repo instantly, no local setup	✓ Free personal use

✦ Penpot: diseña antes de construir

Antes de escribir una sola línea de código, boceta tu UI en Penpot — la alternativa a Figma open source y basada en navegador que es completamente gratuita. Resolver primero tus layouts y la estructura de componentes ahorra horas de refactorización más adelante.

01 — GitHub: control de versiones y CI/CD

GitHub es donde vive tu código, donde colaboran tus compañeros de equipo, y donde se disparan los despliegues. Configurar tu repositorio correctamente desde el primer día evita dolores de cabeza más adelante.

# Authenticate, create repo, and push
gh auth login
git init && git add . && git commit -m "init"
gh repo create my-blog --public --source=. --push

# Force a redeploy on Vercel without a code change
git commit --allow-empty -m "redeploy"
git push

brew install glab          # macOS
sudo apt install glab -y   # Ubuntu / WSL2

glab auth login
glab repo create my-blog --public
git remote set-url origin https://gitlab.com/yourname/my-blog.git
git push -u origin main

02 — Terminal y Claude Code

Todo comienza con una buena configuración de terminal. Poner en orden tu shell, Node.js y Git toma unos 10 minutos — y te prepara para todo lo que sigue.

# macOS — Install Homebrew, then essentials
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node git gh
npm install -g pnpm

# Windows — Install WSL2 (run in PowerShell as Administrator)
wsl --install
# After restart, open Ubuntu and run:
sudo apt update && sudo apt install nodejs npm git -y
npm install -g pnpm gh

# Verify installs
node --version && git --version && gh --version

# Clone an existing repo to a new machine
git clone https://github.com/yourname/my-blog.git
cd my-blog && pnpm install

Claude Code es un agente de IA nativo de terminal que lee todo tu código base, escribe archivos, ejecuta comandos, e itera hasta que la función funciona. Es el multiplicador que hace que un solo desarrollador se sienta como un equipo.

npm install -g @anthropic-ai/claude-code
cd my-blog && claude

✦ VS Code: tu editor

VS Code es más que un editor de texto — con las extensiones y ajustes correctos, se convierte en un IDE que entiende todo tu código base. La clave es configurarlo una vez, bien.

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension anthropics.claude-code
code --install-extension rangav.vscode-thunder-client
code --install-extension eamodio.gitlens

Extensiones esenciales:

• Hybrid AI — Hugging Face y Claude — ejecuta un agente de Hugging Face auto-alojado para auditorías, documentación, investigación, revisiones, PRs y planes, mientras mantienes a Claude Code reservado para refactors, bugs y migraciones. Incluye prompts de Claude Code para cada área de trabajo y una comparación de costos que muestra cuánto ahorras.
• Prettier + ESLint — mantiene el código limpio automáticamente. Prettier formatea al guardar, ESLint detecta bugs antes de que lleguen a tus compañeros de equipo.
• Thunder Client — prueba tus rutas de API sin salir del editor. Una alternativa liviana a Postman integrada directamente.
• GitLens — entiende el historial de cada línea de un vistazo. Pasa el mouse sobre cualquier línea para ver quién la escribió, cuándo y por qué.

03 — Vercel: despliega en 30 segundos

Vercel es el hogar de Next.js y la forma más rápida de poner tu app en vivo. Conecta tu repo de GitHub una vez, y cada push a main se despliega automáticamente.

npm install -g vercel && vercel
# Or connect GitHub at vercel.com/new — 3 clicks

Después de desplegar, vuelve a Supabase → Authentication → URL Configuration y agrega tu URL de Vercel en vivo a la lista de Redirect URLs.

✦ Cloudflare Pages: la alternativa a Vercel

Cloudflare Pages es una alternativa convincente a Vercel — especialmente si quieres entrega global en el edge, cero cold starts, y sin límites de ancho de banda. Se conecta a GitHub igual que Vercel y despliega automáticamente en cada push a main. La diferencia clave: tu app corre en la red edge de Cloudflare en más de 300 ubicaciones en vez de un puñado de regiones serverless.

# Install the adapter for Next.js on Cloudflare
npm install --save-dev @cloudflare/next-on-pages

# Add the build script to package.json
# "build:cf": "next build && npx vercel-build"

# Deploy via CLI
npx wrangler pages deploy .vercel/output/static
# Or connect GitHub at pages.cloudflare.com — same 3-click flow as Vercel

04 — Supabase: tu backend en una caja

Supabase te da Postgres, autenticación, almacenamiento de archivos, y suscripciones en tiempo real — todo con tipos de TypeScript autogenerados y un nivel gratuito generoso.

brew install supabase/tap/supabase
pnpm add @supabase/supabase-js @supabase/ssr
supabase gen types typescript --project-id YOUR_ID > types/database.ts

Checklist de configuración de Auth:

• La autenticación por email está activada — confírmalo en Providers → Email.
• El Site URL está configurado — ve a Authentication → URL Configuration y establece tu dominio de producción.
• Las Redirect URLs están configuradas — agrega tanto http://localhost:3000/** como tu URL de Vercel a la lista de Redirect URLs. Sin esto, los magic links quedarán bloqueados.
• Las claves de API están en Vercel — copia NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY desde Project Settings → API, y luego agrégalas a las Environment Variables de Vercel.

✦ CodeSandbox: código desde cualquier lugar

CodeSandbox te permite abrir cualquier repo de GitHub en un entorno de desarrollo en la nube completo — sin necesidad de configuración local. Perfecto para ediciones rápidas sobre la marcha, incorporar colaboradores, o probar una rama en una máquina que no tiene tu entorno de desarrollo.

Solo antepón codesandbox.io/p/github/ a cualquier URL de GitHub y tu repo se abre en un editor similar a VS Code con un servidor de desarrollo en ejecución, acceso a terminal, e integración de vista previa de Vercel incluida.

# Open any GitHub repo in CodeSandbox instantly:
# https://codesandbox.io/p/github/yourname/my-blog

# Or install the browser extension to add an
# "Open in CodeSandbox" button on every GitHub repo page

# Devboxes persist your environment — install deps once,
# resume your session later exactly where you left off

Si estás buscando una app ya hecha construida exactamente sobre este stack, Open Technology App es una plataforma de cola de tareas y gestión de flujos de trabajo auto-alojada en Vercel y Supabase — gratis para empezar.