Next.js Vinculación a rutas dinámicas

En este artículo, aprenderemos cómo podemos crear y vincular rutas dinámicas en nuestro proyecto Next.js. 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.

Crear aplicación NextJS: puede crear un nuevo proyecto Next.js con el siguiente comando:

npx create-next-app GFG

Estructura del proyecto: Se verá así.

Creación de rutas dinámicas: en Next.js, podemos crear rutas dinámicas agregando corchetes en el nombre de la página. Aquí vamos a crear una carpeta llamada gfg y dentro de esta carpeta, crearemos nuestro archivo [id].js como se muestra a continuación.

Nombre de archivo: [id].js Ahora mostraremos nuestra ruta usando la función useRouter() en este archivo.

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

Paso para ejecutar la aplicación: Ahora inicie la aplicación ejecutando el siguiente comando.

npm start

Producción:

Vinculación a rutas dinámicas: en Next.js, podemos vincular fácilmente a rutas dinámicas utilizando el componente ENLACE. Agregar el siguiente código en el archivo index.js.

Nombre de archivo: index.js

// Import Link component
import Link from 'next/link'
  
export default function Home() {
  return (
    <div>
      {/* Adding Heading */}
      <h1>
        This is Homepage
      </h1>
      {/* Adding Buttons */}
      <Link href='/gfg/abc'>
      <a>
        <button>Go to gfg/abc</button>
      </a>
      </Link>
      <br/>
      <Link href='/gfg/123'>
      <a>
        <button>Go to gfg/123</button>
      </a>
      </Link>
      <br/>
      <Link href='/gfg/abc123'>
      <a>
        <button>Go to gfg/abc123</button>
      </a>
      </Link>
    </div>
  )
}

Paso para ejecutar la aplicación: Ahora inicie la aplicación ejecutando el siguiente comando.

npm start

Producción: