Select Page

NextJS: Extracting Dynamic Route Data using useRouter hook

by | May 14, 2023

In the previous post we talked about how to create dynamic pages, and now let’s talk about extracting dynamic route data of each page.

Creating a dynamic website that displays different content depending on user input requires the ability to extract data from the URL. NextJS provides a powerful tool called useRouter, which is a custom hook created by the NextJS development team. In this post, we’ll explore how to use the useRouter hook to extract the exact element entered in the URL when a user clicks on a news item to view its details.

Extracting dynamic route data using useRouter() hook

To use the useRouter hook, we must first import it into our component. Once we have access to the useRouter hook, we can then use it to access the router object, which contains data and methods that can be used to extract the values encoded in the URL. The query property of the useRouter object allows us to access the URL segments by name, which we can then use to fetch the relevant data from a database.


import { useRouter } from "next/router"

export default function DetailsPage() {

    const router = useRouter();

    const dynamicId =

    console.log("ID:", dynamicId)

    return (
        <h1>Details Page</h1>

For example, if the URL is, we can extract the value “news1” by calling console.log( This value can then be used to fetch the relevant news article data from a database and display it on the page.

By utilizing the useRouter hook and the query property, we can easily create dynamic and personalized web pages that respond to user input. The ability to extract data from the URL is especially useful when working with databases and APIs, as it allows us to fetch the correct data linked to the ID provided in the URL.

In conclusion, NextJS’s useRouter hook provides a powerful tool for creating dynamic web pages that respond to user input. By utilizing this hook and the query property, we can easily extract the values encoded in the URL and use them to fetch relevant data from databases and APIs. With NextJS, creating dynamic and personalized web pages has never been easier.

If you want to learn about how to do linking between pages in NextJS refer to this tutorial.


Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

Understanding Layouts in React

Understanding Layouts in React

If you're someone who works with React, you might think you know what a layout is. But, do you really? React, a popular JavaScript library for building user interfaces, employs the concept of layouts to organize and structure web applications. Despite its widespread...

Solving CORS Errors in React: A Step-by-Step Guide

Solving CORS Errors in React: A Step-by-Step Guide

What is Cross-Origin Resource Sharing (CORS)? The Concept Cross-Origin Resource Sharing, commonly known as CORS, is a security feature implemented by web browsers. Its primary function is to control web page requests made by scripts running on one domain to another...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!