How to add query params to Next.js router
Next.js uses the file-system based router so that every file inside pages folder become a route by default.
In this tutorial, we will explain how to append query params to the router and how you can display them, as well as how to deal with the Error: No router instance found related to Next.js router.
Append query params to the page
Let's go ahead and build our page, and then append the query params to the URL
in pages folder create test.js file
import {useRouter} from 'next/router'
import { useEffect } from 'react'
export default function Test () {
const router = useRouter()
useEffect(()=>{
router.query.param1="value1"
router.push(router)
}
,[router.isReady])
return (<div>
Hello {router.query.param1}
</div>)
}
To learn more about query params, check my link to see the different usages
Test the configuration
Now run http://localhost:3000/test and you will be able to see param1 displayed with value1 in the URL and also displayed on the screen
You can define as many as you want, for example add another variable
router.query.param2="value2"
How to solve Error: No router instance found
Always make sure that router query params are executed on client side by using useEffect to avoid the error of No router instance found. you should only use next/router inside the client side of your app.
In our previous code, we added the params inside React useEffect so that we are sure that appending is happening on client side.
useEffect(()=>{
router.query.param1="value1"
router.push(router)
}
,[])
useEffect is very helpful especially when we would like to resolve promises and render them to the page, i strongly recommend to check my article in this link to learn more
How to avoid router.query returns undefined parameter on first render in Next.js
Now sometimes the first render of router query may lead to undefined due to the fact that our router is not ready yet.
To make sure that rendering will be done once the router is ready, we pass in router.isReady to our React useEffect so we are sure that when the router is ready another rendering will be done and our undefined variables will be resolved
useEffect(()=>{
router.query.param1="value1"
router.push(router)
}
,[router.isReady])
Conclusion
We have seen how to append query params to next.js router, and how to solve No router instance found as well as how to avoid the undefined first render with router.query.
I recommend to check also these articles regarding next/router so that you learn interesting tricks of next router to use on your app:
How to get previous URL with next/router
How to append params to next/router
