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

pentest_testing_corp profile image

Insecure Direct Object References (IDOR) in Laravel

Pentest Testing Corp -

edgaremmanuel profile image

Patterns of Enterprise Application Architecture-Day 2

DevByJESUS -

edwin_lisowski profile image

ContextCheck: An open-source framework for testing and evaluating LLMs, RAGs, Chatbots

Edwin Lisowski -

siddharthbhalsod profile image

Vision Language Models: A Comprehensive Overview

Siddharth Bhalsod -