Cómo publicar tu app de React en Vercel

Publicar tu app de React en Vercel es el paso final para convertir un proyecto local en un enlace público que puedes compartir con familia y amigos. Aquí aprenderás a desplegar tu aplicación multipágina, resolver el error de la página 404 y entender qué construiste durante el curso. Es ideal si ya tienes tu proyecto funcionando en local y quieres verlo vivo en Internet.

Qué construiste al pasar de una app de una pantalla a una multipágina

Empezamos con una app que vivía en una sola pantalla y terminamos con una aplicación completa de navegación real. De tener solo un home, pasamos a un ecosistema de páginas y flujos conectados entre sí.

Estas fueron las piezas que sumaste a lo largo del proceso:

• Resultados de búsqueda y detalle de propiedad con ruta dinámica.
• Página de favoritos, perfil y un login simulado.
• Un flujo de reserva casi completo con layout principal y layout anidado.
• Navegación con Link y NavLink, entendiendo su diferencia.
• Navegación programática con query params para las búsquedas.
• Rutas protegidas, loaders por ruta y lazy loading de páginas.
• Manejo de errores por ruta y global, más la página de 404 que engloba todos los errores.

Y aquí viene lo interesante: antes no tenías estos conceptos, y ahora no solo los tienes, sino que los entiendes porque construiste una aplicación usándolos.

¿Qué es el lazy loading de páginas en React? Es una técnica que carga cada página solo cuando el usuario la necesita, en lugar de cargar toda la app de golpe. Esto mejora el rendimiento inicial de tu aplicación.

Cómo publicar tu proyecto de React en Vercel

La recomendación para publicar proyectos de React como este es usar el servicio de Vercel, porque detecta la configuración de forma automática y simplifica el despliegue.

Estos son los pasos concretos para dejar tu app en línea:

1. Crea una cuenta en vercel.com y dale acceso a tu GitHub para que pueda importar tus proyectos.
2. Entra al apartado de proyectos, elige agregar nuevo proyecto y selecciona desde el Git Repository el que estás trabajando.
3. Dale importar. Vercel detecta automáticamente que lo hiciste con la herramienta de build correspondiente.
4. Como en este caso no necesitas variables de entorno, puedes darle deploy directamente.

Cuando termina, aparece un mensaje de felicitación. Haz clic en ir al dashboard y ahí Vercel te entrega el dominio que generó para tu aplicación.

Al abrir ese dominio ves tu página en vivo. Ese enlace ya es público: puedes entrar a los alojamientos, intentar reservar, pasar por el login que hiciste en el curso y confirmar que todo funciona igual que en local.

¿Necesito variables de entorno para desplegar en Vercel? No siempre. Si tu proyecto no depende de claves o configuraciones externas, puedes dar deploy directo sin agregar ninguna variable de entorno.

Por qué la página 404 falla en Vercel y cómo arreglarla

Un detalle importante: al desplegar en Vercel, es posible que los 404 den un error y no muestren la pantalla del código 404 que armaste durante el curso. No es que tu código esté mal, es un tema de configuración del despliegue.

La solución es agregar un archivo llamado vercel.json en la carpeta principal de tu proyecto. Ese archivo queda pineado en la sección de recursos de la clase.

¿Cómo arreglo el error 404 al desplegar React en Vercel? Agrega un archivo vercel.json en la carpeta principal de tu proyecto y vuelve a desplegar. Con eso, tu página 404 personalizada vuelve a mostrarse con normalidad.

Una vez que lo agregas y despliegas de vuelta, todo regresa a la normalidad y tu manejo de errores queda intacto.

Qué sigue después de publicar tu primera app en React

Ahora tienes una base muy sólida para seguir sumando skills en React. Ya no partes de cero: tienes una aplicación real, con complejidad real, lista para evolucionar.

En el siguiente paso, esa complejidad se usa para reordenar la lógica, crear custom hooks y mejorar la mantenibilidad y escalabilidad del proyecto. Es decir, pasas de hacer que funcione a hacer que funcione bien y sea fácil de mantener.

Te invito a completar el examen y compartir tu certificado en tus redes. Etiquétame donde lo publiques y estaré atento para felicitarte. ¿Ya tienes tu proyecto desplegado? Cuéntame en los comentarios cómo te fue con el despliegue.