NextRouter was not mounted Next.JS-CodePudding

Using import { useRouter } from "next/router"; as import { useRouter } from "next/navigation"; throws "Argument of type '{ pathname: string; query: { search: string; }; }' is not assignable to parameter of type 'string'."

    const router = useRouter();
    const [searchInput, setSearchInput] = useState("");

    const search = (e) => {
                router.push({
                    pathname: '/search',
                    query: {
                        search: searchInput,
                    },
                })
    }

NextJS documentation

Froms docs: "A component used useRouter outside a Next.js application, or was rendered outside a Next.js application. This can happen when doing unit testing on components that use the useRouter hook as they are not configured with Next.js' contexts."

CodePudding user response：

const router = useRouter();

const search = (e) => {
          const searchParams = {
                pathname: '/search',
                query: {
                    search: e.target.value,
              },
          } as any
           router.push(searchParams)
}

CodePudding user response：

Now Nextjs CLI install by default Next@13. If you started with Nextjs@12 and recently reinstalled the packages after, you must remove Next to install a version lower than 13. I don't know why but for me it's what worked.

npm uninstall next

npm install [email protected]

Note: Just be sure next version is under 13