Next.js: Error - Module not found: Unable to locate module 'next-router'

When attempting to import Router from next-router, I encountered the following error message: Module not found: Can't resolve 'next-router'

I have the latest version of Next.js installed (13.0.6)

package.json: 

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev -p 8080",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/client": "^3.7.1",
    "cross-env": "^7.0.3",
    "dompurify": "^2.4.1",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.6",
    "graphql": "^16.6.0",
    "lodash": "^4.17.21",
    "next": "^13.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-scripts": "^2.1.3",
    "sass": "^1.56.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^15.0.1",
    "postcss-preset-env": "^7.8.3",
    "precss": "^2.0.0",
    "tailwindcss": "^3.2.4"
  }
next.jsmodulenotfounderrornext-routernextjs-dynamic-routing

Answer №1

The correct way to import useRouter is from "next/router" and not from "next-router".

import { useRouter } from "next/router";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

The environment variables remain static within the .next directory of Next.js production

After building a full-stack app using Netxjs, I generated a build and uploaded the .next folder on Cpanel. Setting up my node app: Here is a screenshot of my node app console: https://i.stack.imgur.com/sbpIP.jpg I added environment variables in both node ...

node.jsnext.js

Executing npm build within a prebuild script on Vercel to compile a Next.js application

I am in the process of developing a unique Markdown- / MDX-based platform for blogging (take a look at my project on GitHub). I want to give users the ability to incorporate their own React components into the content section of their MDX files. The Chall ...

node.jsnpmnext.jspackage.jsonvercel

next-js module for easy integration on external site

Looking to create a feature where merchants can embed the merchant calendar page on their own website using a script, similar to Calendly. Struggling with webpack configuration and looking for guidance on how to achieve this functionality for a single page ...

node.jsreactjsnext.js

The NextJs and MUI datepicker encountered an error with `readOnly` not matching. The server value was empty, while the client value was set to "false"

Alert: The property readOnly does not match. Server: "" Client: "false" I've attempted to use both Mobile and Desktop devices. const isDesktop = useMediaQuery('(min-width:900px)'); I then decide whether to render a Deskt ...

next.jsmaterial-ui

What is the process for setting up redux in _app.tsx?

Each time I compile my application, I encounter the following error message: /!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore(). Although my application functions correctly, I am unsure ...

javascriptreduxnext.js

Issues with the inheritance functionality in styled components are causing errors

The issue arises when I try to customize the styling of my PrimaryButton component, separate from the DefaultButton. Despite writing style properties for it, the changes do not take effect. Here is the folder structure: https://i.stack.imgur.com/0KjyH.pn ...

reactjstypescriptnext.jsstyled-components

Filtering tables with checkboxes using Next.js and TypeScript

I've recently delved into Typescript and encountered a roadblock. While I successfully tackled the issue in JavaScript, transitioning to Typescript has left me feeling lost. My dilemma revolves around fetching data from an API and populating a table u ...

reactjstypescriptsortingnext.jsfiltering

What is the best way to inspect the state of a Next.js component?

I am integrating the react-placeholder package into my component and it specifies that the ready parameter should be set to this.state.ready. What is the equivalent of this in NextJS? After attempting to console.log(this) in my component, I only receive & ...

reactjsnext.js

What OAuth Flow is Suitable for a Separated Frontend and Backend Structure?

My architecture consists of a NextJS frontend and Golang backend with an authentication system using JWTs and an internal user/password database. I am now looking to add OAuth sign-in alongside the current JWT system, while still maintaining API calls with ...

gonext.jsoauth-2.0

Enjoy seamless month navigation while selecting dates with react-date-range component

In my next.js project, I am utilizing the DateRangePicker component from react-date-range. If you visit their demo page, you can observe the expected behavior: when selecting a date on the right, the months remain stationary. You can also watch a video he ...

reactjsnext.jsdate-range

Test failed due to missing Jest mocked data acquisition

Having an issue with my component that is supposed to load data from an API, but the test cannot find the element containing the data as it is mocked for testing purposes. component: import { useDispatch, useSelector } from "react-redux"; import ...

reactjsunit-testingjestjsnext.js

styled components are having issues with background gradients and opacity not functioning properly

Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...

csstypescriptnext.jsstyled-components

How can you include extra information in your Stripe session?

Here is the code snippet for my session: const stripe = require('stripe')(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY); export default async function handler(req, res) { if (req.method === 'POST') { try { const par ...

reactjsnext.jsstripe-payments

How can I update getServerSideProps using a change event in Next.js?

Currently, I am faced with the task of updating product data based on different categories. In order to achieve this, I have set up an index page along with two components called Products and Categories. Initially, I retrieve all products using the getServ ...

javascriptreactjsfetchnext.jsgetserversideprops

Harnessing the Power of NextJS Image Component and @svgr/webpack for Seamless Integration

I have recently set up a Next.js site utilizing the @svgr/webpack library. In order to start using an SVG image with the new next/image component, I configured my next.config.js file accordingly. My next.config.js setup looks like this: module.exports = { ...

javascriptreactjswebpacknext.jsnextjs-image

Having trouble with the onLoadingComplete props in the Next.js Image component?

Is there a way to properly retrieve the naturalWidth and naturalHeight using the onLoadingComplete props? I tried following the documentation on https://nextjs.org/docs/api-reference/next/image#onloadingcomplete but it doesn't seem to be working. Am I ...

reactjsnext.jsreact-propsnextjs-image

Creating movement in an SVG patterned background

Currently in the process of designing a brand new website using NextJS and Tailwind. I am looking to incorporate an infinitely translating background effect that moves towards the bottom right, similar to this example (but with my own unique pattern): htt ...

htmlcssreactjssvgnext.js

The element type 'x' in JSX does not offer any construct or call signatures

I have recently imported an image and I am trying to use it within a function. The imported image is as follows: import Edit from 'src/assets/setting/advertising/edit.png'; This is the function in question: function getOptions(row) { ...

javascriptreactjstypescriptnext.js

NextJS rendering props in a loop

I need help figuring out how to render props in a loop using the forEach function. This is my current code: {console.log('the catalog inside the component ----->', catalog)} {Object.keys(catalog).forEach(key => { return ( <d ...

javascriptnext.js