What Are Dynamic Routes?

Dynamic routes are one of the many different types of routes used throughout websites. This concept takes the place of static routes and instead involves a changeable ID, otherwise known as a slug. This changeable ID is used to display different segments through one file instead of statically directing each link to a separate file.

Using Dynamic Routes

The first step in the setup is to create a next application. If you are unsure of how to create a next app, you can have a look at my tutorial for creating a next app. Once creating your next app, you are going to want to open it and we will need to be doing some cleaning up.

The first thing that we are going to clean up is page.js (in the app folder). Delete all of the code inside of the return section and replace it with a div.

After completing this, we are going to want to add a JSON file at the root of the project. Followed by a products folder inside the src/app.

Inside this products folder, we will add a folder called [slug] and a page for slug. The square brackets around the folder name let nextjs know that this folder name is not a specific folder name and that it can be dynamic and change.

Now that we have finished adding folders and pages, we need to add code inside of these pages. In the slug page create a function that returns a text inside a div.

export default function page() {
    return (
        <div>Product</div>
    );
}

Once completed, we're going to create a Link to connect to the products page and be able to go to that page. Starting off, add a Link in the div and add a href to link to the page.

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href="/products">
        Products page
      </Link>
    </div>
  )
}

Make sure to import Link from next/link. To test if this works we can start up the application by running, npm or yarn run dev. Make sure to get rid of the global CSS folder.

You should see that when you press the link on the home page, it will send you to the products page in the pages folder.

Before we get to the dynamic routeing, we are going to make use of the JSON file and use it to map out some products on the products page. Inside the JSON file, we are going to establish some values.

In your JSON file, add curly braces, inside assign a string value to any name you want and add a colon followed by square brackets.

{
    "products": [

    ]
}

Now, inside the square brackets, you can start to add different values to each of the different products.

{
    "products": [
        {
        "id":1,
        "title" : "product1"
        },
        {
            "id":2,
            "title" : "product2"
        },
        {
                "id":3,
                "title" : "product3"
        }
    ]
}

Now that we have assigned different values, we can implement them into our code. Starting, we can import our JSON file to the products page simply by saying, import data from ../../../data.json . After doing this we can map this out.

{data.products.map(data => (
            <Link href={'/products/' + data.id} key={data.id}>
                <h3>
                    { data.title }
                </h3>
            </Link>
        ))}

We first use the JSON identity here, which is data, and list it. Then we redirect it to the product array, where we map it out into an arrow function. Data in the arrow function is the key that you will need to use when listing any of the properties.

Then we add a Link with a href of /products/ but we also want it to redirect to the new dynamic URL so we add its id as the URL link that we want to redirect to. Finally, we list the key and an h3 that renders out the title.

Now in your application, your products page should update.

Now we can move on to the code for the dynamic system. Inside your slug folder and into the page file, we will need to list some parameters.

export default function Page({ params }: { params: { slug: string } }) {
    return <div>My Post: {params.slug}</div>
  }

The first step is to make a function and export it at the bottom. Then we will use params to pass the data along and connect with the products page.

If we go test this out in the browser, you will see that everything is functional and working. If you click one of the links, it will redirect you to a dynamic page.

Conclusion

In conclusion, I hope I helped you understand how to use dynamic routes and, through the use of this technique, achieve an interactive and functional application that can create a dynamic link and show you the basics of this fundamental and useful component.

Qasim's Blog

Qasim's Blog

Dynamic Routing

The Basics That You Need To Know For App Router

What Are Dynamic Routes?

Using Dynamic Routes

Conclusion