Crear rutas dinámicas usando Next.js y React para hacer links con parámetros

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos crear rutas dinámicas para realizar links con parámetros utilizando Next.js.

Lo primero que vamos a hacer es crear una carpeta dentro de nuestras páginas llamada article y dentro vamos a crear un archivo llamado:

[id].tsx

Quedando:

-pages
   -article
      - [id].tsx

Esto nos permitirá poder invocar la URL:

http://localhost:3000/article/1

Ahora dentro de la página podemos crear:

import React from 'react';
import { useRouter } from 'next/router';

const ArticlePage: React.FC<ArticlePageProps> = ({}) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
};

export default ArticlePage;

Para invocarlo tenemos que crear un Link de esta forma:

<Link href={`/article/1`}>Mi link</Link>

Si queremos abrir una página con dos paths tendremos que crear una carpeta con el path de la siguiente forma:

-pages
   -article
      - [id]
         -[name].tsx

Y el código quedaría así:

import React from 'react';
import { useRouter } from 'next/router';

const ArticlePage: React.FC<ArticlePageProps> = ({}) => {
  const router = useRouter();
  const { id, name } = router.query;

  return (
    <div>
      <h1>{id}</h1>
      <p>{name}</p>
    </div>
  );
};

export default ArticlePage;

Y para invocarlo:

http://localhost:3000/article/1/Article Name

O con un link:

<Link href={`/articles/1/${encodeURIComponent("titulo")}`}>Mi artículo</Link>