Next.js es un framework de React.js que combina server-side rendering, enrutamiento propio, optimización de imágenes y de fuentes en una sola herramienta. Si vienes de React y quieres dar el siguiente paso hacia aplicaciones full stack, aquí descubres cómo arrancar tu primer proyecto y qué decisiones técnicas implica.

¿Qué es Next.js y por qué se volvió tan popular?

Next.js es un framework construido sobre React.js, respaldado por Vercel y mantenido por un equipo que prioriza la experiencia del desarrollador y del usuario final. Su CEO, Guillermo Rauch, se define como frontend engineer, y ese enfoque se nota en cada decisión del producto [01:00].

Es el competidor más fuerte de Create React App en cuanto a adopción. Tan influyente se ha vuelto que muchas implementaciones nuevas de React aparecen primero en Next.js, lo que le da un peso enorme dentro del ecosistema.

¿Qué hace especial a Next.js frente a React puro? Te entrega server-side rendering, router propio, optimización de imágenes y fuentes listos para usar, sin que tengas que configurarlos desde cero.

Eso sí, no todo es color de rosa. Algunas decisiones de arquitectura, integración o compatibilidad con herramientas externas no son del agrado de toda la comunidad. Es un trade-off que vale la pena conocer antes de comprometerte con el framework.

¿Cómo crear tu primer proyecto con Create Next App?

El equipo de Next.js creó una herramienta sospechosamente parecida a Create React App: create-next-app. Para arrancar con la última versión de todo, ejecuta:

bash npx create-next-app@latest next-test

A diferencia de Create React App, aquí te aparece un formulario interactivo con preguntas de configuración [04:30]. Por ejemplo:

• ¿Quieres usar TypeScript?
• ¿Quieres usar ESLint?
• ¿Activamos otras herramientas opcionales?

Esto te permite tener un boilerplate mucho más afinado desde el segundo cero, en lugar de partir de una base genérica.

¿Qué archivos y carpetas trae el proyecto?

Al entrar al proyecto encuentras una estructura clara que define cómo trabaja Next.js:

• pages/: contiene index.js, _app.js y la carpeta api. Aquí vive el file system routing.
• public/: archivos estáticos del proyecto.
• next.config.js: configuración avanzada del framework.
• package.json: con apenas tres dependencias principales (react, react-dom, next).

Dentro del package.json también encuentras los scripts clave: next dev para desarrollo, next build para generar la versión de producción y next start para arrancar el servidor en producción.

¿Cómo funciona el enrutamiento por archivos en Next.js?

La carpeta pages no es decorativa: define las rutas de tu aplicación a partir de los nombres de los archivos. Esto se conoce como file system routing y elimina la necesidad de configurar un router manualmente.

Además, Next.js usa archivos especiales como _app.js para modificar el comportamiento global de la aplicación o de rutas específicas. Y trae componentes propios como next/head y next/image, pensados para resolver problemas comunes con SEO y rendimiento [10:15].

¿Qué es file system routing? Es un sistema donde cada archivo dentro de pages se convierte automáticamente en una ruta de tu aplicación, sin configuración extra.

¿Por qué Next.js es un framework full stack?

Aquí viene lo interesante. Next.js no se queda en el front-end: te permite crear tus propias APIs dentro de la carpeta pages/api, igual que harías con Express, Koa o Fastify en Node.js [12:40].

Eso significa que en un mismo proyecto puedes:

• Construir la interfaz con React.
• Renderizar del lado del servidor con server-side rendering.
• Exponer endpoints de API consumidos por tu propio front-end.
• Desplegar todo como una aplicación unificada.

Esa es la verdadera definición de framework full stack: una herramienta que cubre el ciclo completo de desarrollo. ¿Siempre conviene? No. A veces un sitio estático con archivos exportados a GitHub Pages es más que suficiente. Otras veces necesitas la flexibilidad de un servidor Node.js corriendo en producción.

¿Cuándo usar server-side rendering y cuándo sitios estáticos?

Next.js soporta ambos modos de render y la elección depende del tipo de aplicación que construyas:

• Sitios estáticos: ideales para contenido que no cambia con frecuencia, despliegues simples y costos bajos.
• Server-side rendering: útil cuando necesitas datos frescos en cada request, personalización por usuario o SEO dinámico.

Aprender los dos enfoques te da criterio para decidir qué arquitectura usar en cada proyecto, y ese criterio vale más que memorizar comandos.

¿Qué pasa con las versiones y la migración entre ellas?

A diferencia de Create React App, que tiende a mantenerse estable, Next.js cambia rápido. Cada versión mayor (12, 13, y siguientes) introduce diferencias importantes en API, configuración o convenciones [08:20].

Si tomas un proyecto existente y necesitas migrarlo, el flujo es claro:

1. Actualiza la versión en el package.json.
2. Borra node_modules y el package-lock.json.
3. Reinstala dependencias.
4. Revisa la guía oficial de migración para aplicar los cambios necesarios.

Es un ejercicio que vas a repetir varias veces en tu carrera, así que mejor familiarizarte desde ahora.

¿Ya creaste tu primer proyecto con create-next-app? Cuéntame en los comentarios qué opciones elegiste en el formulario inicial y por qué.