I hope this is a simple question. I can't figure out why it's doing this. Anyways, using NextJS i'm trying to access the params in the router using the useRouter hook and bining it with the querystring plugin to split asPath, since NextJS doesn't allow you to access the query part of the router if using stateless. This is my code:

import { useRouter } from 'next/router';
import queryString from "query-string";

const withPageRouter = (router) => {
    router.query = { ...queryString.parse(router.asPath.split(/\?/)[1]) };
    return router;
  };

function getRouterParams(){
  const router = useRouter();
  router = withPageRouter(router);
  return router;
}

export async function getTown() {
const town = await getRouterParams();
return town;
}

NOw when I attempt to run it, I get this error:

Server Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See  for tips about how to debug and fix this problem.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

lib/api.js (34:26) @ getRouterParams

  32 | 
  33 | function getRouterParams(){
> 34 |   const router = useRouter();
     |                          ^
  35 |   router = withPageRouter(router);
  36 |   return router;
  37 | }

But to me it looks like it should be fine; it is in a function body? I feel like i'm missing something obvious. I appreciate the help.

I hope this is a simple question. I can't figure out why it's doing this. Anyways, using NextJS i'm trying to access the params in the router using the useRouter hook and bining it with the querystring plugin to split asPath, since NextJS doesn't allow you to access the query part of the router if using stateless. This is my code:

import { useRouter } from 'next/router';
import queryString from "query-string";

const withPageRouter = (router) => {
    router.query = { ...queryString.parse(router.asPath.split(/\?/)[1]) };
    return router;
  };

function getRouterParams(){
  const router = useRouter();
  router = withPageRouter(router);
  return router;
}

export async function getTown() {
const town = await getRouterParams();
return town;
}

NOw when I attempt to run it, I get this error:

Server Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs/link/invalid-hook-call for tips about how to debug and fix this problem.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

lib/api.js (34:26) @ getRouterParams

  32 | 
  33 | function getRouterParams(){
> 34 |   const router = useRouter();
     |                          ^
  35 |   router = withPageRouter(router);
  36 |   return router;
  37 | }

But to me it looks like it should be fine; it is in a function body? I feel like i'm missing something obvious. I appreciate the help.

• javascript
• reactjs
• next.js
• next-router

Share Follow edited Feb 27, 2021 at 8:47 Zsolt Meszaros 23.2k1919 gold badges5858 silver badges6969 bronze badges asked Feb 26, 2021 at 18:59 sylargafsylargaf 52411 gold badge88 silver badges2727 bronze badges 1

• @Man of Action is correct. You need to import router directly as import router from "next/router" – Mr. Hedgehog Commented Feb 27, 2021 at 8:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can't be call useRouter() in normal function.

You can call only useRouter() inside of Top of the React function ponent or custom hooks

Learn more about Rules of Hooks here : https://reactjs/docs/hooks-rules.html

As an alternative to useRouter you might want to use withRouter (can be used for class ponents). Also see following related SO question:

How to use "useRouter()" from next.js in a class ponent?

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

export default withRouter(class extends React.Component {
  render() {
    return (
      <div>{ this.props.router.query.id }</div>
    )
  }
})

The hook should be in react Functional ponent not inside a normal function or on the top. The ponent should also be a client ponent.