Creating Dynamic Routes Using Next.js and React to Make Links with Parameters

by
Tiempo de lectura: < 1 minuto

Today we’re going to learn how to create dynamic routes for linking with parameters using Next.js.

The first thing we’re going to do is to create a folder within our pages called article, and inside it, we’re going to create a file named:

[id].tsx

Resulting in:

-pages
   -article
      - [id].tsx

This will allow us to invoke the URL:

http://localhost:3000/article/1

Now inside the page, we can create:

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;

To invoke it we have to create a Link like this:

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

If we want to open a page with two paths, we will have to create a folder with the path like this:

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

And the code would look like this:

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;

And to invoke it:

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

Or with a link:

<Link href={`/articles/1/${encodeURIComponent("titulo")}`}>My article</Link>
Post Views: 1

Leave a Comment