Vercel

Desplegar frontends y sitios estáticos con Vercel: integración con Git, previews por rama y commit, serverless functions y dominio propio.

Vercel es una plataforma de deploy muy usada para proyectos de frontend y frameworks como Next.js (creado por el mismo equipo). Conectas un repo de GitHub, GitLab o Bitbucket y cada push genera un deploy con URL única.

Cada rama y cada pull request obtienen una URL de preview; la rama principal (main) se asigna a producción. Soporta sitios estáticos, Next.js, React, Vue, Svelte, Astro y otros con detección automática del framework.

Incluye CDN, HTTPS, serverless functions (API routes en Next o funciones en /api) y dominio personalizado. Plan gratuito amplio para proyectos personales.

  • Deploy y hosting para frontend y JAMstack.
  • Vercel está optimizada para aplicaciones modernas de frontend. Importas el repositorio, eliges el framework (o deja que lo detecte) y el directorio raíz; Vercel ejecuta el build (npm run build, etc.) y publica el resultado en su CDN. Es muy popular con Next.js porque Vercel es la empresa detrás de Next; también funciona con React, Vue, Svelte, Astro o HTML estático.
  • Deploy desde Git con preview por rama y por PR.
  • Detección automática de framework y comando de build.
  • Serverless functions, edge functions y dominio propio.

¿Qué es Vercel?

Deploy y hosting para frontend y JAMstack.

Vercel está optimizada para aplicaciones modernas de frontend. Importas el repositorio, eliges el framework (o deja que lo detecte) y el directorio raíz; Vercel ejecuta el build (npm run build, etc.) y publica el resultado en su CDN. Es muy popular con Next.js porque Vercel es la empresa detrás de Next; también funciona con React, Vue, Svelte, Astro o HTML estático.

  • Deploy desde Git con preview por rama y por PR.
  • Detección automática de framework y comando de build.
  • Serverless functions, edge functions y dominio propio.

Previews y producción

Una URL por commit o por rama.

Cada push a una rama genera una URL de preview (por ejemplo proyecto-abc123.vercel.app). Así puedes probar cambios antes de hacer merge. La rama que marques como «production» (suele ser main) se sirve en el dominio principal del proyecto. Útil para revisar diseños o para que el cliente vea un enlace de prueba sin tocar producción.

Vercel vs Netlify (resumen)

Ambas son muy similares; elección por gusto o stack.

Las dos ofrecen deploy desde Git, CDN, HTTPS, dominio propio y plan gratuito. Vercel brilla con Next.js y con previews muy integrados; Netlify tiene formularios nativos sin código y una interfaz muy clara. Muchos equipos usan una u otra según el framework del proyecto o la experiencia del equipo; para sitios estáticos o React/Vue genérico, cualquiera sirve.

Introducción al Mundo Web, Hosting y Dominios
14

Vercel

Desplegar frontends y sitios estáticos con Vercel: integración con Git, previews por rama y commit, serverless functions y dominio propio.

Código del tema: Vercel

📘 Teoría

¿Qué es Vercel?

Deploy y hosting para frontend y JAMstack.

Vercel está optimizada para aplicaciones modernas de frontend. Importas el repositorio, eliges el framework (o deja que lo detecte) y el directorio raíz; Vercel ejecuta el build (npm run build, etc.) y publica el resultado en su CDN. Es muy popular con Next.js porque Vercel es la empresa detrás de Next; también funciona con React, Vue, Svelte, Astro o HTML estático.

  • Deploy desde Git con preview por rama y por PR.
  • Detección automática de framework y comando de build.
  • Serverless functions, edge functions y dominio propio.

Previews y producción

Una URL por commit o por rama.

Cada push a una rama genera una URL de preview (por ejemplo proyecto-abc123.vercel.app). Así puedes probar cambios antes de hacer merge. La rama que marques como «production» (suele ser main) se sirve en el dominio principal del proyecto. Útil para revisar diseños o para que el cliente vea un enlace de prueba sin tocar producción.

Vercel vs Netlify (resumen)

Ambas son muy similares; elección por gusto o stack.

Las dos ofrecen deploy desde Git, CDN, HTTPS, dominio propio y plan gratuito. Vercel brilla con Next.js y con previews muy integrados; Netlify tiene formularios nativos sin código y una interfaz muy clara. Muchos equipos usan una u otra según el framework del proyecto o la experiencia del equipo; para sitios estáticos o React/Vue genérico, cualquiera sirve.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Introducción al Mundo Web, Hosting y Dominios.

Test de Introducción al Mundo Web, Hosting y Dominios

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .