How To Get Current Route In Next.js?

Next.js is a popular React framework that makes it easy to build server-side rendered and static web applications. One common task in web development is determining the current route or URL of the page. In Next.js, this can be done using the built-in useRouter hook. This article will guide you through the process of getting the current route in a Next.js application.

Prerequisites

• React and React hooks
• Next.js framework basics
• JavaScript ES6 features

Steps to Get Current Route in Next.js

Step 1: You can create a new NextJs project using the below command:

npx create-next-app gfg

Project Structure

Method 1: Using useRouter() Method

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 ‘get-route.js‘.

//get-route.js

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

export default function getRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    return (
        <div>
            <h1>GeeksforGeeks</h1>
            <h2>pathname:- {router.pathname}</h2>
            <h2>query:- {router.query}</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

In the above example first, we are calling our useRouter() hook and after that, we are displaying the objects of our router in the console.

• pathname:  Current route. That is the path of the page in ‘/pages’.
• query: The query string parsed to an object.
• asPath: The path (including the query) shown in the browser.

Knowing how to access the current route is essential for navigation and conditional rendering.

Method 2: Using withRouter() Method

You can easily get the current router value in react class component using the withRouter(). To use this you just have to export your class component inside withRouter(). In the below code first, we are importing our withRouter function from the next/router after that we are creating a new class component with the name of getRoute and inside that, In our render function, we are displaying the pathname, asPath, and query from the props received in our class. After that, we are exporting our class u=inside withRouter() function.

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

export class getRoute extends React.Component {
    
    render() {
        console.log(this.props.router.pathname)
        console.log(this.props.router.query)
        console.log(this.props.router.asPath)
        return (
            <div>
                <h1>GeeksforGeeks</h1>
                <h2>Using withRouter</h2>
            </div>
        )
    }
}

export default withRouter(getRoute)

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

npm run dev

Output

Method 3: Using getInitialProps() Method

You can also access the value of the route the context prop inside getInitialProps(). Context prop contains information of your routes like asPath, query, and Pathname. In the below code first, we are importing our withRouter function from the next/router after that we are creating a new class component with the name of getRoute and inside that, we are creating a async getIntitalProps function which contains context as a prop.

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

export class getRoute extends React.Component {

    static async getInitialProps(context) {
        // Using context prop to get asPath, query, context
        const {asPath, query, pathname} = context 
        return{asPath, query, pathname}
    }
    
    render() {
        // Consoling the values
        console.log(this.props.pathname)
        console.log(this.props.query)
        console.log(this.props.asPath)
        return (
            <div>
                <h1>GeeksforGeeks</h1>
                <h2>Using Context prop in getInitialProps</h2>
            </div>
        )
    }
}

export default getRoute

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

npm run dev

Output