Actualmente cuando hablamos de desarrollar aplicaciones en React, ya no tan solo podemos estar hablando de usar solamente esta biblioteca en conjunto de otros modulos de Javascript, sino podriamos referirnos a usar los multiples frameworks que existen basados en React. Uno de estos frameworks es Nextjs.
Pero Nextjs tiene muchos conceptos que no estan incluidos en React y por esto muchas personas quizas, aun no se deciden en ir por este framework o no lo entienden del todo, Así que en este tutorial mostaré Algunas caracteristicas que ofrece Nextjs, y la razon de porque escojo Nextjs por encima de React en proyectos de producción en varias ocasiones.
¿Qué es Nextjs?
Nextjs es un framework basado en React para crear aplicaciones web FullStack. Este framework viene con un backend de Nodejs que podemos utilizar para comunicarnos con una base de datos; además nos permite crear una REST API o de GraphQL con facilidad y en cuanto al frontend el framework nos permite generar sitios con SSG (Static Site Generation), SSR (Server Side Rendering) y React tipico.
Posee un compilador basado en Rust gracias a un proyecto llamado swc, y debido a que la empresa que lo desarrollada llamada Verce, cuenta con un servicio en la nube, tambien es facil de desplegar. Aunque puedes desplegarlo en cualquier nube que gustes.
Creando un proyecto de Nextjs
Para empezar el crear un proyecto en Nextjs es muy similar a react, en el sentido que tambien tiene una herramienta de consola (CLI), por ejemplo este es el comando para generar proyectos en React:
npx create-react-app react-project
Mientras que este es el equivalente en next:
npx create-next-app next-project
Estructura de Nextjs
En un proyecto de Nextjs tenemos tipicamente esta estructura:
.
├── next.config.js
├── package.json
├── package-lock.json
├── pages
│ ├── about.js
│ ├── api
│ ├── _app.js
│ ├── index.js
│ └── services.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── README.md
└── styles
├── globals.css
└── Home.module.css
Entre las carpetas y archivos principales podemos encontrar a:
pages, La carpeta pages es donde colocamos nuestras paginas de nuestra aplicacion_app.js, es el contenedor principal de todas nuestras paginas
publices donde colocamos nuestros archivos estaticosstyleses donde colocamos nuestros estilos de toda nuestra aplicación
Enrutador por defecto
Cuado trabajamos con React, es bastante tipico necesitar de una forma de crear multiples paginas en el frontend, es aqui donde entran bibliotecas como:
En nextjs, por otro lado, no tenemos que instalar un modulo por aparte, Next ya trae su propio enrutador y de hecho es más fácil de usar. Basicamente en la carpeta pages, colocamos todas nuestras paginas, por ejemplo:
.
├── about.js
├── _app.js
├── index.js
└── services.js
y si colocamos contenido en cada una de ellas.
export default function About() {
return <h1>About</h1>;
}
export default function Services() {
return <h1>Services</h1>;
}
podremos visitar las paginas:
Y por supuesto tambien podemos colocar archivos dentro de otros, rutas dinamicas, recibir parametros, renombrar y mucho más: https://nextjs.org/docs/api-reference/next/router
Code Spliting Automatico
Cuando creamos una aplicacion de React, esta generar archivos grandes de Javascript, asi que una forma de optimizar la carga de nuestra aplicacion es dividiendolas en archivos que sean cargados a medida que son demandados, para poder hacer esto tenemos conceptos como Lazy Loading o modulos como react-loadable
Sin embargo en Nextjs lo tenemos de forma automatica cuando hacemos build de nuestra aplicacion.
npm run build
Este comando, generara multiples archivos. Esto quiere decir que cuando la aplicacion carga solo llama un solo archivo de Javascript y el resto sera cargado a medida que sean solicitados
Image Optimization
Una de las caracteristicas de Nexjs es que viene con modulos tipicos de optimizacion, uno de ellos es la etiqueta Image.
Si añades una imagen en tu carpeta public y luego lo llamas de algun componente, como este:
export default function About() {
return (
<div>
<h1>About</h1>
<img src="/desktop.jpg" />
</div>
);
}
Luego si vas a las pestaña de Network en tu navegador y capturas la informacion de la carga de imagenes (img), veras como el tamaño de tu imagen esta alli.
pero si usas la etiqueta Image de Nextjs:
import Image from "next/image";
export default function About() {
return (
<div>
<h1>About</h1>
<Image
src="/desktop.jpg"
width="1080"
height="1920"
alt="desktop wallpaper"
/>
</div>
);
}
al ver la informacion de carga, notaras una mejora modesta.
import Image from "next/image";
export default function About() {
return (
<div>
<h1>About</h1>
<Image
src="/desktop.jpg"
width="1080"
height="1920"
alt="desktop wallpaper"
layout="responsive"
/>
</div>
);
}
Pero si cambias a un tamaño de pantalla más pequeño, y haces un Hot Refresh (dando un click derecho en el icono de Refresh del navegador y escogiendo borrar cache y recargar) notaras como el tamaño de la carga es muchisimo mejor.
otras etiqueta de optimizacion tambien es Script.
API Routes
En un proyecto de Nextjs tenemos la opcion de generar tambien nuestro codigo de Backend, lo que lo convierte en un framework de desarrollo Web FullStack (Frontend y Backend).
Esta caracteristicas nos permite poder crear una REST API, una API de GraphQL, conectarnos a una base de datos.
Y lo genial es que usa la misma idea de generar las paginas del frontend, tambien para organizar nuestras rutas de backend:
.
├── pages
│ ├── api
│ │ └── hello.js
dentro de la carpeta api, crea otros archivo, llamado users.js y responde con un JSON (el cual es un formato tipico de REST APIs).
export default function handler(req, res) {
res.status(200).json([{ name: "joe" }, { name: "jane" }]);
}
Y luego visita esta ruta con esta URL: http://localhost:3000/api/users
Esta caracteristica es muy útil cuando estas usando servicios como Algolio, Firebase o cualquier otro servicios de la nube en donde no quieres colocar tu API Key y Secret Key en el frontend sino en el backend.
Multioples Estrategias de Renderizado
Otra de las ventajas de Nextjs es que cuenta con multiples estrategias de rendferizado como:
- Client Side Rendering (React tipico ejecutado desde Javacript en el navegador)
- Server Side Rendering, Interfazt generada y procesada desde el backend
- Static Site generation, forma de convertir nuestro codigo a simples archivos estaticos como HTML, sin la necesidad de pedir datos en produccion
- Incremental Static Regeneration, una forma de actualizar archivos estaticos basados en un intervalo de tiempo.
Despliegue en Vercel
Vercel es la empresa que desarrolla Nextjs, y posee una nube de despliegue de aplicaciones. Por supuesto esta nube esta preparada para poder despelgar aplicaciones de Nextjs con facilidad. Ademas permite conviertir tu backend a funciones serverless.
Para desplegarlo simplemente instalamos un paquete llamado vercel:
npm i vercel
en este caso estoy instalando el paquete localmente. Si quieres instalarlo globalmente puedes usar:
npm i -g vercel
luego ejecutamos el paquete con el siguiente comando:
vercel
En nuestro caso como lo hemos instalado localmente, debemos usar:
npx vercel
Eso te pedira informacion de como desplegarlo, simplemente responde las preguntas y cuando finalices ya estaria desplegado tu proyecto en vercel.
En consola aparecerá una URL de tu proyecto al que podrás visitar.
Con esto puedes ver que la empresa con este framework a tomado en consideracion muchas funcionalidades basicas y nos las da por defecto para que no nos preocupemos de lo mismo, una y otra vez.
Conclusión
Nextjs es un framework bastante Versatil, aprender a usarlo correctamente puede llevar un poco más de tiempo en comparación de React. Pero en la práctica vale bastante el esfuerzo. Por supuesto dejo al lector la ultima decision de ver si todo esto realmente es necesario a su proyecto.
No existe ninguna herramienta que pueda hacer de todo, asi que se debe siempre investigar mas a fondo para poder decidirse por una.