How to add query params to Next.js router

Cover Image for How to add query params to Next.js router
Ali Bentaleb

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

nextjs append query params to router

You can define as many as you want, for example add another variable

router.query.param2 = 'value2';

nextjs append query params to router

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]);
script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7011429793744057" crossorigin="anonymous">

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

How to get query params in Next.js

How to solve router.query is undefined in Next.js

How to create a responsive ham...How to solve router.query is u...


More interesting articles