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)

Read next

lithephp profile image

Framework Lithe: Projetos incríveis feitos com ele!

Lithe -

ayaarragab profile image

Ever save a LinkedIn post thinking, “I’ll get back to this later,” but totally forget?

Aya Ragab -

vellanki profile image

Microservices Architecture: Breaking Down Monoliths for Scalability

Koti Vellanki -

codeplato profile image

How to write elegant code 1: Keep the chain of event calls short

code plato -