Next.js Injecting the router

In this article, we will learn how we can inject the router into our NextJS project. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Next.js has a file-system-based router built on the concept of pages. When a file is added to the pages directory it's automatically available as a route. To access the router object in a React component you can use useRouter or withRouter and this is called injecting the router.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

Project Structure: It will look like this.

We can inject the router in NextJs pages to access the router object. You can do this using 2 functions:-

• Using useRouter( )
• Using withRouter( )

1. Using useRouter(): In NextJs we can easily get the value of the current route using the useRouter() function. To use this we are going to create a new page inside our pages directory with the name 'getrouter.js'. After that, we will add the below code to our getrouter.js page. In the below code first, we are importing our useRouter function from the next/router after that we are creating a new function with the name of CurrentRoute and inside that, we are calling our useRouter() and storing that variable in a new constant variable named router. After that, we are displaying the pathname, asPath, and query from the route variable.

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

export default function CurrentRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    console.log(router.query)
    return (
        <div>
            <h1>GeeksforGeeks</h1>
            <h2>pathname:- {router.pathname}</h2>
            <h2>asPath:- {router.asPath}</h2>
        </div>
    )
}

Step to run the application: Start the development server by typing the below command in the terminal.

npm run dev

Output:

2. Using withRouter(): You can't use the useRouter() hook in react class component. So if you want to access route object data inside a class component then you have to withRouter() function. In our getrouter.js file change the content to the below content.

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

export class CurrentRoute extends React.Component {
    
    render() {
        return (
            <div>
                <h1>GeeksforGeeks</h1>
                <h2>pathname:- {this.props.router.pathname}</h2>
                <h2>asPath:- {this.props.router.asPath}</h2>
            </div>
        )
    }
}

export default withRouter(getRoute)

Here we are just changing our  CurrentRoute function in a react class component and exporting it using withRouter.

Step to run the application: Start the development server by typing the below command in the terminal.

npm run dev

Output: