Routing con Next.js

¿Qué es Next.js?

Uno de los principales problemas más comunes a la hora de crear aplicaciones con React es la lista de dependencias (la cual puede ser bastante grande) que debemos instalar para realizar hasta la más pequeña operación: Babel, WebPack, ESLint…

Next.js es un framework construido sobre React que soluciona ese problema, ya que, instalando una sola dependencia, tenemos configuarado todo lo necesario para crear una aplicación. Sus principales características son:

• Hot Code Reloading. Next.js recarga la página automáticamente cuando detecta cualquier cambio en el código guardado.
• Automatic Routing. Es el tema principal de éste post, Next.js mapea las rutas de la aplicación a partir de nuestro sistema de archivos, de tal manera, que no requiere configuración por nuestra parte.
• Single File Components. Permite añadir estilos dentro del componente utilizando style-jsx, para tener todo dentro del mismo archivo.
• Server Rendering. Los componentes se renderizan en el lado del servidor y no en el cliente.
• Automatic Code Splitting. Next.js solo carga el código JavaScript que sea necesario en cada página. Por ejemplo, si solo una de las páginas importa la biblioteca de Axios, esa página incluirá la biblioteca en su paquete.
• Prefetching. Usando el componente Link de Next.js, la página precarga los componentes que son enlazados mediante links para agilizar la navegación. 
• Dynamic Components. Permite importar módulos de JavaScript y componentes de React dinámicamente. 
• TypeScript support. Next.js está desarrollado en TypeScript y lo soporta eficazmente.

Routing con React VS Routing con Next.js

Cuando queremos enlazar varias páginas con React, debemos crear un archivo Router.js. Dicho archivo contendrá un listado de las rutas de nuestra aplicación y los componentes a los que hacen referencia. Es un archivo que se debe configurar y modificar a lo largo del desarrollo para poder enlazar nuestros componentes. 

Sin embargo con Next.js no es necesario llevar a cabo ninguna de estas acciones, sino que las rutas se generan automáticamente a partir de la estructura de nuestra carpeta pages. Por ejemplo:

pages/index.js -> '/'
pages/blog/index.js => '/blog'
pages/blog/first-post.js => '/blog/first-post'

Ejemplo Práctico de routing con Next.js

Veamos un ejemplo prácico. Vamos a crear una página simple en la que realizaremos varias operaciones.

Next Link

Para realizar todos los enlaces, hemos utilizado el componente Link de Next.js que permite enlazar componentes evitando la recarga de la página. Este componente se importa de  next/link y se utiliza de la misma manera que un elemento de enlace normal:

<Link href='/calculo/1'>Tabla multiplicar de 1</Link>

Rutas dinámicas con un parámetro – Tablas de multiplicar

En cuanto al contenido, en primer lugar hemos creado una lista de las tablas de multiplicar de los números del 1 al 5, de tal manera que se enviará como parámetro el número cuya tabla de multiplicar queremos obtener: 

pages/calculo/[num].js  ->  http://localhost:3000/calculo/3

Para crear una ruta con un elemento dinámico, Next.js permite cambiar el archivo index.js por una variable entre corchetes, en este caso [num], que usaremos posteriormente para recoger el valor. 

Rutas dinámicas con varios parámetros – Calcular

Para crear una ruta con varios elementos usaremos el carácter ? para enlazarlos, de tal manera que cada uno tendrá su variable específica con el que le haremos posteriormente referencia.

A continuación, realizaremos unos cálculos que requieren dos parámetros. Vamos a multiplicar y dividir dos números de la siguiente manera: 

pages/calculo/[num].js -> http://localhost:3000/calculo/4?por=3

Rutas dinámicas con múltiples parámetros – Sumatorio

A continuación realizaremos un sumatorio de múltiples parámetros, para ello pasaremos un listado de parámetros separados por el carácter / de la siguiente manera: 

pages/cálculo/[...num].js -> http://localhost:3000/calculo/1/2/4/6/4/7

La variable [num] contendrá ahora una lista de elementos. Dicha variable se tratará de la misma forma que un array.

Rutas dinámicas con parámetros opcionales – Fibonacci

Por último calcularemos la sucesión de fibonacci. Con este ejemplo ilustramos el hecho de que las rutas, además de ser dinámicas, pueden ser opcionales:

pages/fibonacci/[[...num]].js -> http://localhost:3000/fibonaci
pages/fibonacci/[[...num]].js -> http://localhost:3000/fibonaci/30
pages/fibonacci/[[...num]].js -> http://localhost:3000/fibonaci/5/20

De esta manera, con la variable [num] accederemos a ningún o varios parámetros. 

Recogida de parámetros

Entonces, ¿cómo recogemos dichos parámetros?. Next.js nos ofrece el componente useRouter que se importa de next/router y que nos permite recoger los parámetros que obtenemos de la url.

Nosotros enviamos los parámetros a través de la ruta con el elemento link, del que hemos hablado un poco más arriba:

<Link href='/calculo/4?por=3'>4 x 3</Link>

Y lo recibimos en la página [num].js de la siguiente forma:

const router = useRouter();
const { num } = router.query;

De esta manera, la variable num podrá ser un valor, una lista de valores o no estar definida. Al igual que la variable por en el segundo caso:

const router = useRouter();
const { num } = router.query;
const { por } = router.query;

const realizarOperacion = () => {
   if (por != undefined) {
       resultado = num * por;
   } else if (entre != undefined) {
       resultado = num / entre;
   }
}

De esta manera el routing con Next.js se vuelve una tarea sencilla y rápida. Es posible acceder a el código de ejemplo en el siguiente enlace.

Autor/a: Susana Santos Moreno

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2020 – 2021

Código/ recursos utilizados/ Otros datos de interés: enlace a Github y Linkedin.