Cuando hablamos de los Frameworks de desarrollo web Frontend más populares, indudablemente tendriamos que mencionar en algun punto a Nextjs, el cual basicamente convierte a React de ser solo una biblioteca para crear interfaces de Usuario (UI) a un Framework mucho mas completo que puede usarse para desarrollar practicamente cualquier aplicacion web, ademas que unido a su ecosistema de bibliotecas y plataformas que lo rodean, lo vuelven una de las mejores opciones para desarrollar proyectos web fullstack al dia de hoy.
Ahora como realmente hay mucha informacion del Framework en este video lo dividire en varias partes, en donde les hablare acerca de:
- ¿Qué es Nextjs?
- Ventajas y desventajas de Nextjs
- Ecosistemas de Herramientas de Nextjs
- Como aprenderlo
empecemos conociendo entonces que es Nextjs.
¿Qué es Nextjs?
Nextjs es un Framework para crear aplicaciones web frontend basado en React, es decir que con React podemos crear porciones de Interfaz tanto para la web como para Moviles llamadas componentes, aunque incluso mucho mas, como aplicaciones de escritorio y sitios web estaticos, que hablo más de todo esto en el video del Ecosistema de React, sin embargo en la practica para crear proyectos serios y que sean fáciles de mantener React necesita de otros paquetes adicionales, como:
- react-router-dom para tener multiples rutas o paginas en React
- Redux Tookit, Zustand o bibliotecas de manejo de estado en general para manejar el estado de aplicacioens grandes y complejas ademas de poder debuggear mas facilmente.
Y aunque podrias implementar tus propias soluciones para no usar estas bibliotecas, o usar API Context, lo cierto es que hay muchos proyectos actuales que necesitan estas caracteristicas para ejecutarlas en produccion, asi que en un punto se hace necesario instalarlas para la mayoria de proyectos serios.
Esto tambien es porque React es solo una biblioteca que se enfoca en la vista y nada mas, y esto ha generado que encima de React se hayan desarrollado varios proyectos que han tratado de darle lo que le falta, en los que podemos encontrar a Gatsby, Remixjs, Redwoodjs, Blitz.js, y por supuesto y Nextjs siendo este ultimo la mejor opcion en mi opinion de todos estos frameworks basados en React, y que tambien ya mencione en un video pasado.
Veran, Nextjs ya toma en cuenta que en muchos proyectos de Frontend se necesitan hacer tareas similares, es por esto que el framework ya tiene includo caracteristicas como:
- Un enrutador que permite crear multiples paginas facilmente basado en como creas las carpetas, es decir esta basado en el sistema de archivos
- tiene componentes para optimizar tareas comunes como un componente Script, para optimizar carga de scripts o un componente Image que reemplaza a la etiqueta img del navegador y carga mucho mas rapido las imagenes, o un componente font para cargar rapidamente fuentes, o uno llamado
dynamicpara hacer code Spliting de nuestros componentes y que el bundle final no pese demasiado.
Pero incluso cuando esto es practico, estoy seguro que muchas de estas caracteristicas, son posibles de lograr en React, sin ningun problema, con ayuda de paquetes de terceros (paquetes de npm), pero lo que si es complicado de lograr en React es:
- Tener un buen SEO
- Tener cargas iniciales rapidas
Y de hecho esto no solo es dificil de lograr en React sino en cualquier otro Framework de Frontend basado en Javascript, cuando hablamos de proyectos intermedios/grandes.
Y yo se que este es un tema que para muchas aplicaciones no son un problema, pero que para las que si lo necesitan en un punto es mas dificil de lograr. Es por esto que Nextjs para solucionar el problema de poder ser amistoso con el SEO (Search Engine Optimization), es decir que tus paginas puedan ser encontradas en los buscadores facilmente usa algo llamado Server Side Rendering o abreviado SSR, el cual permite procesar tus interfaces desde el servidor, para que cuando lleguen al frontend estas ya no necesitan procesarse alli, haciendo que la carga inicial de la pagina sea muy rapida y que los web crawlers puedan leer el contenido e indexarlo, pudiendo recomendar esa pagina en los buscadores.
Esta caracteristica es muy util sobretodo si tienes productos de una tienda virtual que mostrar, o un blog donde quieres que las personas que encuentren tus articulos o si es un sitio de noticias quieres que lean tus publicaciones, y asi. Asi que si quieres SEO necesitas SSR.
Aunque por supuesto si vas a desarrollar un panel de control o dashboard, o hacer una aplicacion puramente para usuarios autenticados, no necesitaras SSR, asi que Nextjs te permite seguir usando el mismo renderizado de vistas que trae React por defecto, el cual se procesa enteramente en el navegador, a lo que recibe el nombre de Client Side Rendering, es decir el React que usamos siempre.
O si en caso necesitas solo crear una pagina y no necesitas que cambie el contenido Next tambien te permite generar una pagina HTML con contenido estatico para que no tenga que procesarse ni el backend ni el frontend siendo lo mas rapido posible, esto es llamado Static Site Generation o SSG y es lo que herramientas y frameworks como Astro, Gatsby, Jekyll o Hugo tambien ofrecen.
Aunque tambien es posible volver a actualizar este contenido estado basado en un intervalo de tiempo usando algo llamado Incremental Static Regeneration que no es mas que volver a compilar una pagina HTML pasado un tiempo para que se actualice, y que el desarrollador decide cuando.
Es decir al final Nextjs, provee tanto Server Side rendering, Client side rendering, Static site Generation, e Incremental Static Regeneration, dandote todos los metodos de renderizados disponibles e incluso pudiendolos combinar en distintas paginas
Y algo interesante es que como para poder lograr el SSR se necesita codigo de Servidor, Nextjs hace uso de Nodejs que es otra tecnologia de Javascript para el backend, que en este caso se usa para convertir un componente de React a simple HTML y enviarlo al frontend.
Y aqui es donde Nextjs pasa de ser un simple framework de Frontend a algo mas, porque como ya tenemos Nodejs en el proyecto, porque no usarlo ademas de procesar componentes de frontend, tambien para desarrollar APIs de Backend como REST APIs y GraphQL APIs, total al final muchos proyectos necesitan de codigo de backend que complementa al de frontend.
Es por esto que Nextjs tambien ofrece una carpeta llamada api dentro del proyecto, aunque no es necesario llamarla asi, pero bueno es una convencion dejarla con ese nombre, y esta permite crear una REST API o GraphQL API, o cualquier API de backend realmente en tu proyecto, y que como es codigo de servidor puedes comunicarlo con bibliotecas de base de datos como podria ser mysql, postgresql, o mongodb, o usar ORMs de Nodejs como Prisma, Sequelize o Mongoose, o puedes consultar otros servicios de la nube.
Al final tendriamos en un mismo proyecto el codigo de Backend y Frontend, dandonos un enfoque similar a como desarrollar aplicaciones fullstack de Javascript con stacks como el de MERN por ejemplo.
Nextjs vs MERN Stack
Es decir, Si hablamos de aplicaciones web modernas, sabemos que estas consisten en dos proyectos practicamente, un proyecto Frontend usando algun Framework de Javascript, y un proyecto de backend usando algun lenguaje de programacion de servidor como podria ser Python, Java, C#, Go, Rust, y muchos otros más (PHP, Ruby, Kotlin, etc).
Y si en nuestro caso para nuestro proyecto quisieramos usar un solo lenguaje para todo el codigo, es decir tanto frontend como Backend, probablemente iriamos por Javascript ya que este es el unico lenguaje tecnicamente que se ejecuta en el navegador y que si aprendemos Nodejs tambien podriamos usarlo en el Backend.
Ademas que si unimos una base de datos de Mongodb, tambien tendriamos nuestra base de datos que usa conceptos de Javascript.
Uniendo estas tecnologias formamos uno de los Stacks (Conjunto de Herramientas) mas populares de la web llamado el Stack MERN (Mongodb, Express, React y Node), que viene de Mongodb, Express, React y Nodejs. Y a pesar que es bastante practico usarlo, aun tenemos el lio de tener dos proyectos, y tener que desplegarlos por aparte.
Pero con Nextjs llegamos a lo mismo, ya que es un frontend de React y un backend de Nodejs, solo que ya estan diseñado para integrarse muy bien en un mismo proyecto, de hecho si ya has desarrollado en el Stack MERN, veras muchos conceptos similares aqui tambien en Nextjs, por lo que podrias lograr algo muy similar.
Ventajas de Nextjs
y todas estas caracteristicas, nos deja al final con un Framework muy versatil con muchas ventajas como:
- Renderizar del lado del servidor, similar a un Framework de Backend, para obtener cargar iniciales rapidas y mejorar el SEO
- Renderizar del lado cliente, de la misma forma que ofrece React, Vue, Angular, lo que significa que podemos utilizar todas las bibliotecas de React que ya conocemos
- Generacion de contenido estatico, similar a proyectos como Astro, Hugo, Gatsby, Jekyll, para generar paginas que no cambian frecuentemente y no es necesario que se procesen, teniendo contenido muy rapido de cargar
- Incremental Static Regeneration, para contenido estatico pero que queremos que se actualize cada cierto tiempo
- Crear APIs de Backend como REST APIs y GraphQL APIS similar a como lo desarrollarias en Nodejs
- Desplegar facilmente proyectos en Vercel, que no seria una caracteristica como tal de Nextjs, pero como la empresa que desarrolla Next es Vercel, este tiene muy pensado la integracion con el despliegue de su framework, haciendolo una opcion muy facil, y rapida de llevar a produccion
ademas si despliegas en Vercel, no solo haria facil poner tu proyecto en produccion sino que tambien este optimiza el codigo de backend y tu API es convertida a funciones serverless similar a lo que ofrecen plataformas de la nube, ademas de servir mas rapido el contenido gracias a su Red Edge.
Desventajas de Nextjs
Aunque, Por supuesto cada framework tambien tiene caracteristicas, carencias o dificultades asi que las que tiene Nextjs son:
- Requiere que ya conozcas conceptos de Frontend de React y Backend en Nodejs para que puedas entender lo que estas haciendo realmente, asi que a pesar que te facilita la integracion backend y frontend en el mismo proyecto, esto no quiere decir que no necesitas entender los conceptos de frontend y backend en algun punto, debido a esto, personalmente no diria que sea un framework facil para crear aplicaciones web, sino un framework muy practico.
- Tambien es un framework que tiende a ser mucho mas lento en desarrollo, no se confundan, no es que la aplicacion sea lenta, sino el servidor de desarrollo que muestra los cambios, tiende a ser mas lento que cuando desarrollas en proyectos como vitejs por ejemplo, esto debido a que nextjs tiene varios metodos de renderizado y vuelve a generarlo para que puedas ver los cambios sin que refresques la pagina, pero en produccion esto no es un inconveniente, aunque a mas grande sea tu proyecto de Next, notaras que necesitaras mas recursos de hardware para que las herramientas como el Linter, Typescript y demas se ejcuten sin ningun problema, aunque este es un tema de proyectos grandes
- Tienes que considerar si determinados paquetes soportar SSR, a pesar que todos los paquetes de React se pueden ejecutar en Nextjs, es cierto tambien que hay paquetes que no pueden ser procesados por el servidor de Nodejs de nextjs, por lo que a veces tambien es necesario configurar paquetes como Apollo, o componentes de frontend para que no sean procesados, esto no parece un problema, peor de nuevo si vienes de React tan solamente, esto te parecera nuevo, y tendras que investigar mucho mas de como usar tu biblioteca no solo en React sino tambien en Nextjs.
Y aunque hay frameworks que pudieran parecerse a Nextjs, como Nuxtjs en el mundo de Vue, Svelte Kit en Svelte, o Remixjs que seria su alternativa directa, lo cierto es que Next tambien forma parte de una de las plataformas de la nube que esta facilitando mucho el despliegue de proyectos modernos, me refiero a Vercel.
Ecosistema de herramientas de Nextjs
Ahora Nextjs tambien tiene su comunidad que va creciendo por lo que no solo hay modulos de React que puedes usar aqui sino tambien modulos dedicados solo a Nextjs tan solamente, en los que podemos encontrar a:
NextAuth que permite añadir autenticacion facilmente a proeyctos de Nextjs con provedores OAuth, como Google, Github, Facebook, Twitter, y muchos otros muy facilmente. De hecho a este proyecto le ha ido tan bien que actualmente hasta planea soportar otros frameworks ademas de Nextjs, renombradose a simplemente authjs
SWR, que es un manejador de estados de datos del servidor, es decir es basicamente React Query pero para Nextjs desarrollado por Vercel
SWCque es un compilador para aplicaciones web de Javascript escrito en Rust, patrocinado por Vercel
Turbopack que es un module bundler, es decir un empaquetador de aplicaciones para aplicaciones web desarrollado en Rust, y que seria un equivalente a Webpack
oustatic, que es un CMS basado en archivos estaticos desarrollado encima de Nextjs
chadcn que es un conjunto de componentes reutilizables basado en Tailwind para Nextjs que puedes añadir facilmente en tus aplicaciones
Y asi.
Por cierto tambien parte del uso extendido de Nextjs es tambien debido a que Vercel provee una manera facil de desplegarlo solo con un comando, el comando:
vercel
Pero no necesarimente tiene que desplegarse aqui, puedes usar cualquier proveedor, aunque eso si esto no es como desplegar un proyecto de react, sino mas un proyecto de nodejs, asi que recuerda que si vas a desplegar Nextjs necesita tener Nodejs disponible.
Conclusion
En fin como puedes ver el ecosistema de Nextjs es bastante grande, asi que usandolo puedes crear desde aplicaciones sencillas dedicadas solo al frontend, o tambien aplicaciones web fullstack (Backend mas Frontend) usando solo este framework, aunque eso si, si buscas hacer tareas complejas igual recomendaria usar a Nextjs solo para Frontend, y aun asi crear tu propio backend en donde podrias mantenerlo por separado, Pero esto por supuesto siempre depende de tu proyecto.
Igual no lo pienses mucho y si ya sabes Nextjs, usalo y si eventualmente crece tu aplicacion podras migrar tu backend a su propio proyecto.
Y si quieres aprender como aprender a usarlo, te dejo el curso practico de Nextjs, usando sus ultimas caractersiticas en este video que estas viendo a continuacion.