DEV Community

Dipen Maharjan
Dipen Maharjan

Posted on

How to send data query to the route in NEXT.Js

It's very simple to pass the data query to the route in NExt.js

At first you need to initialize it:

const router = useRouter();
Enter fullscreen mode Exit fullscreen mode

and import from next/router

import { useRouter } from "next/router";
Enter fullscreen mode Exit fullscreen mode

Then you can use it like:

router.push({
 pathname: "/list",
 query: { search: "support" },
});
Enter fullscreen mode Exit fullscreen mode

The following code results to:

http://localhost:3000/list?search=support
Enter fullscreen mode Exit fullscreen mode

Pass multiple queries

router.push({
 pathname: "/list",
 query: { search: "support", limit: 10 },
});
Enter fullscreen mode Exit fullscreen mode

This results to:

http://localhost:3000/list?search=support&limit=10
Enter fullscreen mode Exit fullscreen mode

You can pass multiple parameters as well might be integer, string, boolean.

you can pass dynamic data as well.

Dynamic pass route

var searchData = "elonmusk";
var limitData = 15; 
router.push({
 pathname: "/list",
 query: { search: searchData, limit: limitData },
});
Enter fullscreen mode Exit fullscreen mode

This results to:

http://localhost:3000/list?search=elonmusk&limit=15
Enter fullscreen mode Exit fullscreen mode

Follow me @slimpotatoboy at twitter

Top comments (0)