¿Cómo capturar todas las rutas en Next.js?

En este artículo, aprenderemos cómo podemos capturar todas las rutas en nuestro proyecto NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional. El enrutamiento define la forma en que los puntos finales de la aplicación manejan las requests de los clientes.  

Capturar todas las rutas: podemos capturar todas las rutas en NextJs usando rutas de captura. Para esto, debemos agregar tres puntos dentro de los corchetes en el nombre del archivo como se muestra a continuación:

./pages/[...file_name].js

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Después de crear la carpeta de su proyecto (es decir, gfg), muévase a ella usando el siguiente comando.

cd gfg

Estructura del proyecto: Se verá así.

Ahora vamos a crear una nueva ruta dinámica para capturar todos los caminos. Para esto, vamos a crear un nuevo archivo javascript dentro de nuestro directorio de páginas con el nombre […gfg].js. Después de eso, agregue el siguiente contenido en ese archivo.

Nombre de archivo: /páginas/[gfg].js 

// Importing useRouter() method
import { useRouter } from 'next/router'
  
function Gfg(){
  
  // Initializing useRouter() method
  const router = useRouter()
  
  return <h1>Path :- {router.asPath} </h1>
}
  
export default Gfg;

Explicación: en el código anterior, estamos usando el gancho useRouter para acceder al objeto del enrutador. El objeto del enrutador contiene los datos sobre la ruta actual, como el nombre de la ruta, la consulta, la ruta, etc. Primero, estamos importando useRouter en nuestro archivo y luego estamos creando una nueva variable para almacenar el valor del objeto del enrutador. Luego estamos mostrando el valor de la propiedad asPath del objeto del enrutador.

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm run dev

Producción: