Si trabajas con React.js y aún no conoces Next.js, estás frente a una de las herramientas más influyentes del ecosistema JavaScript actual. Este framework, respaldado por Vercel, ofrece server side rendering, un sistema de rutas propio, optimización de imágenes y fuentes, y hasta la posibilidad de crear APIs backend dentro del mismo proyecto. Su popularidad ha crecido tanto que compite directamente con Create React App como la forma preferida de construir aplicaciones React.
¿Qué hace a Next.js tan relevante en el ecosistema React?
Next.js no es solo una librería adicional, es un framework completo que se sitúa por encima de React.js. Esto significa que tiene sus propios componentes internos, como next/head y next/image, además de reglas y convenciones específicas para organizar el código [01:52].
Un dato interesante es que Guillermo Rauch, CEO de Vercel, se presenta como front-end engineer en lugar de como CEO. Esa pasión por la experiencia de usuario se refleja directamente en las decisiones de diseño del framework [00:42]. Next.js tiene tanto peso que influye en cómo se implementan funcionalidades futuras de React.js, e incluso las implementa antes que el propio equipo de React [01:15].
¿Cómo se crea un proyecto con Next.js desde cero?
El proceso es muy similar a Create React App. Se utiliza el comando npx create-next-app@latest seguido del nombre del proyecto [01:35]. La bandera @latest asegura que se instale la versión más reciente de todas las dependencias.
A diferencia de Create React App, Next.js hace un formulario de preguntas durante la instalación [02:16]:
- Si quieres usar TypeScript desde el inicio.
- Si deseas integrar herramientas adicionales como ESLint.
- Configuraciones de estilo y estructura.
Al finalizar, se instalan únicamente tres dependencias: React, React DOM y Next [02:42]. El package.json resultante incluye tres scripts fundamentales:
next dev: levanta el entorno de desarrollo.next build: genera el build de producción.next start: arranca la aplicación en modo producción con servidor Node.js [03:08].
¿Qué es el file system routing y cómo funciona?
Una de las características más distintivas de Next.js es su sistema de rutas basado en archivos, conocido como file system routing [05:07]. Dentro de la carpeta pages, cada archivo JavaScript representa una ruta de la aplicación. Por ejemplo, index.js corresponde a la página principal.
Existen archivos especiales como _app.js que modifican la configuración global de la aplicación [05:22]. La estructura de carpetas y los nombres de archivos definen directamente la navegación, los endpoints y las vistas del proyecto.
¿Por qué Next.js se considera un framework full stack?
Next.js va más allá del desarrollo front-end. Permite trabajar con server side rendering, lo que significa que el servidor genera el HTML antes de enviarlo al navegador, resolviendo problemas comunes de las aplicaciones estáticas como el SEO y los tiempos de carga inicial [03:30].
Pero además, Next.js permite crear APIs propias dentro del mismo proyecto [05:50]. Así como existen Express, Hapi u otros frameworks de Node.js para desarrollo backend, Next.js cumple esa misma función. La carpeta pages/api es donde se definen estos endpoints, y pueden consumirse directamente desde el frontend del mismo proyecto.
Esta es la verdadera definición de un framework full stack: manejar tanto la interfaz de usuario como la lógica del servidor en un solo lugar [06:15].
¿Qué considerar sobre versiones y migración en Next.js?
A diferencia de Create React App, que tiende a ser más estable en su API, Next.js cambia con frecuencia entre versiones [04:15]. Si necesitas migrar un proyecto de una versión anterior a la más reciente, el proceso recomendado es:
- Actualizar la dependencia en el
package.json.
- Borrar la carpeta
node_modules y el archivo package-lock.json.
- Consultar la documentación oficial y tutoriales sobre los cambios específicos de cada versión [04:30].
El archivo next.config.js permite configurar aspectos avanzados del proyecto desde el inicio, como redirects, variables de entorno y optimizaciones personalizadas [04:48]. La carpeta public sigue existiendo para archivos estáticos, independientemente de si se usa server side rendering o exportación estática.
Aprender a diferenciar cuándo conviene usar server side rendering frente a una exportación estática es crucial para elegir la arquitectura correcta de cada aplicación. Ambas opciones tienen ventajas, y el criterio para elegir entre ellas es una habilidad que se desarrolla con la práctica y el conocimiento profundo de estas herramientas.
¿Ya has trabajado con Next.js o estás por comenzar? Comparte tu experiencia y las dudas que tengas sobre este framework.
