Get the URL query parameters in Next.js

To get the query parameters from the URL in Next.js, you can use either:

• useRouter hook from next/router if the call is within a function component, or from a class wrapped in a function component.
• withRouter if the call is made from a class extending React.component.

useRouter

useRouter hook is based on the React hook useContext, and it returns a singleton so even if it is called multiple times from a function, it will return the same thing.

useRouter inside a function component

To get the URL query parameters inside a function component with _useRouter_ hook, we destructure its return value and get the query object, which contains the list of the query parameters we have typed in the URL.

import { useRouter } from "next/router";

const Test = () => {
  const { query: queryParams } = useRouter();
//We check if we get a value for each URL query parameter, otherwise we return a default value. 
  const pageName = queryParams.page != undefined ? queryParams.page : "default";


  const maxRows = queryParams.maxRows != undefined ? queryParams.maxRows : "3";
  return (
    <div>
      the page name is {pageName} and has a {maxRows}
    </div>
  );
};


export default Test

Now when you hit the browser with query parameters separated with ampersand &

http://localhost:3000/test?page=toto&maxRows=4

It shows a custom message based on the URL query parameters we have entered.

useRouter inside a class wrapped in a function component

The same useRouter can be used a class when wrapped inside a function

import { useRouter } from "next/router";

const Test = () => {
  const { query: queryParams } = useRouter();
  class Avatar {

    constructor(pageName, maxRows) {
      this.pageName = pageName;
      this.maxRows = maxRows;
    }

    getAvatar = () => {
      return `the page name is ${pageName} and has a ${maxRows}`;
    };
  }


  const pageName = queryParams.page != undefined ? queryParams.page : "default";
  const maxRows = queryParams.maxRows != undefined ? queryParams.maxRows : "3";
  const avatar = new Avatar(pageName, maxRows);
  return <div>{avatar.getAvatar()}</div>;
};

export default Test;

Hit the same URL and you will get identical results.

withRouter

To get the URL parameters within a class which extends the React.Component, use withRouter.

What it does is to assign the useRouter hook to the React component props under the name router, so we can get all useRouter features by accessing this.props.router.

The React component is either a function, a class extending the React. Component, or a React fragment.

import { Component } from "react";
import { withRouter } from "next/router";

class Avatar extends Component {
  render() {
    const { query } = this.props.router;
    const pageName = query.page != undefined ? query.page : "default";

    const maxRows = query.maxRows != undefined ? query.maxRows : "3";
    return (
      <div>
        The page name is {pageName} and has a {maxRows}
      </div>
    );
  }
}

export default withRouter(Avatar);

Conclusion

We have demonstrated how to get the URL query parameters in Next.js by either using useRouter or withRouter. The difference between both hooks is that the first one could be used inside a function component, and the latter is assigned to the React component props under the name router so it could be used in classes extending React.component for example.