Next.js router is returning query parameters as undefined on first render?

by

Just found out what is the solution to my problem:

From: https://nextjs.org/docs/api-reference/next/router#router-object

isReady: boolean – Whether the router fields are updated
client-side and ready for use. Should only be used inside of
useEffect methods and not for conditionally rendering on the server.

This is what happens to the router.query on client when you hit /search?q=XXX.

1st render

router.isReady: false
router.query: {}

Subsequent renders

router.isReady: true
router.query: {"q":"xxx"}

Conclusion

The fact that router.query is not populated on the client (for SSG pages) on the first run is a design implementation detail. And you can monitor whether it’s has been populated or not by checking the router.isReady boolean property.

More Related Contents:

  1. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  2. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  3. How to access files uploaded to the public folder in Next.js?
  4. Can’t import SVG into Next.js
  5. NextJS environment variables aren’t working
  6. Next.js – Error: only absolute urls are supported
  7. Target Active Link when the route is active in Next.js
  8. Nextjs: Unable to load images from static folder
  9. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  10. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  11. How to setup i18n translated URL routes in Next.js?
  12. NextJs CORS issue
  13. How does the revalidate process in Incremental Static Regeneration work?
  14. How to type a page component with props in Next.js?
  15. How to hash CSS class names in Nextjs?
  16. Persistent navigation in a NextJs _app
  17. Dynamically build classnames in TailwindCss
  18. How to dynamically import non-React client side libraries in Next.js?
  19. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  20. Loading Screen on Next.js page transition
  21. How to detect window size in Next.js SSR using react hook?
  22. Unable to load images from static folder
  23. Get URL pathname in nextjs
  24. Next Image not taking class properties
  25. How to handle login failed error in NextAuth.js?
  26. Warning: Function components cannot be given refs
  27. Use Connect or pass data as props to children
  28. React router, pass data when navigating programmatically?
  29. Callback when DOM is loaded in react.js
  30. Listen to keypress for document in reactjs

Leave a Comment