Next.js, Firebase y Vercel para principiantes: guía real

Next.js, Firebase y Vercel para principiantes es la combinación con la que yo construyo casi todo lo que sale de Méndez Labs, y la usé desde mi primer proyecto, cuando todavía no sabía programar. Te cuento qué hace cada pieza, en qué orden conviene montarla y dónde me equivoqué yo, para que tu primera app llegue a internet sin tantas vueltas.

¿Qué hace cada pieza: Next.js, Firebase y Vercel?

Las tres resuelven problemas distintos y por eso se llevan bien.

Next.js es el framework de React que arma tu aplicación: las pantallas, las rutas y las páginas que el buscador puede leer. Con el App Router, cada carpeta dentro de app se convierte en una ruta. Si creas app/contacto/page.tsx, ya tienes la página /contacto.

Firebase pone lo que normalmente exigiría un servidor propio: inicio de sesión (Authentication), una base de datos (Firestore) y almacenamiento de archivos (Storage). Tú no administras ninguna máquina.

Vercel publica tu proyecto. Conectas el repositorio de GitHub y cada vez que subes cambios, Vercel construye la app y la deja en una dirección pública.

Piénsalo como un restaurante: Next.js es la cocina y el menú, Firebase es la despensa y el libro de pedidos, Vercel es el local con la puerta abierta al público.

¿Por qué esta combinación funciona para empezar?

Por una razón práctica: te deja avanzar sin decidir diez cosas a la vez. Con un solo lenguaje, TypeScript, escribes las pantallas y la lógica que habla con la base de datos. No necesitas aprender administración de servidores antes de ver tu primera pantalla.

Además hay mucha documentación oficial y, algo que a mí me importó más de lo que esperaba, las herramientas de IA conocen bien este stack. Cuando algo se rompía de noche, mi mentor de IA entendía el error a la primera porque el ecosistema está muy documentado. Si quieres ver el tipo de cosas que salen de aquí, mira los proyectos en https://cesarmendez.dev/proyectos.

Tiene límites, y conviene saberlos desde el principio. Firestore es una base de datos de documentos, no relacional, así que si tu idea necesita cruzar muchas tablas con consultas complejas, quizá otra base de datos te acomode mejor. Para una primera app de formularios, listas, perfiles y paneles, alcanza de sobra.

¿En qué orden se monta una primera app?

Este es el orden que sigo, y que recomiendo porque te da algo funcionando en cada paso.

1. 1Crea el proyecto de Next.js con el comando oficial de creación y arráncalo en tu computadora. Verifica que ves la página de inicio.
2. 2Crea un proyecto en la consola de Firebase y registra una aplicación web. Te entrega un bloque de configuración con tus claves públicas.
3. 3Guarda esa configuración en variables de entorno, en un archivo .env.local, y no la pegues directo en el código.
4. 4Agrega inicio de sesión con correo o Google. Es la primera funcionalidad que vale la pena probar de punta a punta.
5. 5Guarda y lee un documento en Firestore. Una nota, una tarea, lo que sea. Que se escriba y se lea de vuelta.
6. 6Escribe las reglas de seguridad antes de invitar a nadie. Más abajo explico por qué.
7. 7Súbelo a GitHub y conéctalo a Vercel. Copia ahí las mismas variables de entorno.

Si no sabes por dónde empezar con la IA como ayuda, en la Academy armé un recorrido completo con simuladores y proyecto propio: https://cesarmendez.dev/academy/curso.

¿Qué errores cometen casi todos al principio?

Los tres que más me costaron a mí, y que veo repetirse:

Dejar Firestore abierto. Al crear la base de datos puedes elegir un modo de prueba con reglas permisivas. Sirve para los primeros minutos. Si lo dejas así, cualquiera con la configuración de tu app podría leer o escribir tus datos. Las reglas de seguridad son la puerta real de tu información, y las claves de configuración del cliente no son un secreto. Por eso las reglas importan tanto.

Olvidar las variables de entorno en Vercel. Tu app funciona perfecto en tu computadora y en producción falla porque Vercel no tiene tus variables. Cópialas en la configuración del proyecto y vuelve a desplegar.

Mezclar lo que va en el navegador con lo que va en el servidor. Las claves que empiezan con el prefijo público de Next.js viajan al navegador. Las credenciales de administrador de Firebase nunca deben llevar ese prefijo, y solo se usan en código de servidor, como las rutas de API.

Hay un cuarto que no es técnico: querer construirlo todo antes de enseñarlo. Te recomiendo validar la idea primero, y escribí cómo hacerlo en https://cesarmendez.dev/blog.

¿Cómo se despliega y se mantiene?

Una vez conectado el repositorio, el flujo es simple: haces cambios, los subes a GitHub y Vercel construye y publica. Cada rama puede tener su propia dirección de vista previa, útil para probar antes de tocar la versión principal.

Mi hábito es correr la compilación de producción en local antes de subir. Si la compilación falla en tu computadora, fallará en Vercel, y te ahorras esperar para enterarte.

Con el tiempo vas a querer separar entornos, vigilar errores y ordenar tus reglas de Firestore. Nada de eso hace falta el primer día. Primero publica algo pequeño que funcione, aunque sea una sola pantalla con inicio de sesión.

Preguntas frecuentes

¿Necesito saber programar para usar Next.js, Firebase y Vercel? Necesitas lo básico de JavaScript y React para entender lo que construyes. Yo empecé sin saber nada y avancé con la IA como mentor, pero le pedía que me explicara cada paso en lugar de solo copiar código.

¿Firebase es una buena opción para una app real o solo para practicar? Sirve para apps reales de tamaño pequeño y mediano, siempre que cuides las reglas de seguridad y tu modelo de datos. Si tu proyecto necesita consultas relacionales complejas, evalúa otra base de datos desde el principio.

¿Puedo cambiar de Firebase a otra opción más adelante? Se puede, pero cuesta trabajo porque los datos y la autenticación están ligados al servicio. Conviene aislar las llamadas a la base de datos en un solo lugar de tu código desde el inicio.

Si quieres probar cómo construyo con IA antes de comprometerte con nada, entra a la prueba gratuita: https://cesarmendez.dev/academy/prueba