Segmentos de ruta dinámica de Next.js

En este artículo, aprenderemos cómo podemos obtener la ruta actual 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.

Los segmentos de rutas dinámicas son rutas dinámicas (también conocidas como slugs de URL, URL bonitas y otras) que podemos crear en las aplicaciones de NextJs usando los corchetes en el nombre del archivo. Esto ayudará a los desarrolladores a crear aplicaciones más complejas que serán difíciles de crear solo con rutas predefinidas.

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

npx create-next-app gfg

Estructura del proyecto: Se verá así.

NextJs permite que la función cree rutas dinámicas sin mucho esfuerzo. Puede seguir los pasos a continuación para crear rutas dinámicas.

Paso 1: Cree una nueva carpeta con el nombre de ‘dinámica’ y dentro de esa carpeta cree una ruta dinámica. Podemos crear rutas dinámicas en NextJs usando corchetes en el nombre del archivo. Por ejemplo:-

/pages/route/[file_name].js

Paso 2: Cree un archivo de ruta dinámica con el nombre ‘ [datos] .js ‘ y agregue el siguiente contenido en el archivo.

import React from 'react'
import {useRouter} from 'next/router';
  
export default function getRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    console.log(router.query)
    return (
        <div>
            <h1>GeeksforGeeks</h1>
            <h2>pathname:- {router.pathname}</h2>
            <h2>asPath:- {router.asPath}</h2>
        </div>
    )
}

En el ejemplo anterior, primero llamamos a nuestro gancho useRouter() y luego, mostramos los objetos de nuestro enrutador en la consola.

• ruta:   ruta actual. Esa es la ruta de la página en ‘/pages’.
• consulta: la string de consulta analizada en un objeto.
• asPath: la ruta (incluida la consulta) que se muestra en el navegador.

Paso 3: Inicie el servidor de desarrollo escribiendo el siguiente comando en la terminal.

npm run dev

Producción: