import Router from ‘next/router’ is it ok?

by

I guess the main suggestion to not use Router.push() or Router.pathname directly from the object itself is because of the way Next.js serves the applications. When you’re trying to do:

import Router from 'next/router';

const HomePage = () => {
  console.log(Router.pathname);

  return (
    <div>hi</div>
  )
}

You will receive an error with: You should only use "next/router" inside the client side of your app. This is because of the way next/router works with SSR.

You could however put this in an useEffect and it will work… but that’s hacky and you will probably run into issues in the future.

Both useRouter and withRouter are Next.js their solution to this problem. They are both build so they can work with SSR and CSR. So my suggestion is just to use one of these, they work great 🙂.

More Related Contents:

  1. How to add new pages without rebuilding an app with +150k static pages?
  2. useRouter/withRouter receive undefined on query in first render
  3. NEXTJS: getServerSideProps not working into components
  4. Fresh NextJS App throwing errors before any changes
  5. Error: A required parameter (slug) was not provided as a string in getStaticPaths for /posts/[slug]
  6. How can I get (query string) parameters from the URL in Next.js?
  7. Dynamic Importing of an unknown component – NextJs
  8. Next.js SyntaxError “Unexpected token ‘export'”
  9. Parsing error : Cannot find module ‘next/babel’
  10. Error: Image Optimization using Next.js default loader is not compatible with `next export`
  11. Next/Image’s components are too slow to appear
  12. For Next.js Dynamic Routes, it is possible to combine a string with a [slug]?
  13. Cannot find module or type declarations while it works in local build
  14. Next failed to load SWC binary
  15. Programmable router
  16. Fetch error when building Next.js static website in production
  17. Can’t build React/Next project – found page without a React Component as default export (context api file)
  18. How can I determine the IP of my router/gateway in Java?
  19. First Load JS shared by all is rather heavy in next.js
  20. Target Active Link when the route is active in Next.js
  21. How to post JSON data from JavaScript frontend to FastAPI backend?
  22. I can’t reference an image in Next.js
  23. How to type a page component with props in Next.js?
  24. How to use cookie inside `getServerSideProps` method in Next.js?
  25. Persistent navigation in a NextJs _app
  26. next.js environment variables are undefined (Next.js 10.0.5)
  27. Angular2 Router error: cannot find primary outlet to load ‘HomePage’
  28. TypeError [ERR_INVALID_URL]: Invalid URL using Next-auth only in Production
  29. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  30. How to prevent Next.js from instantiating a singleton class/object multiple times?

Leave a Comment