next-route-query
v1.0.6
Published
Route Query is a utility library for handling URL query parameters in NextJS applications. It supports NextJS 13 or higher and requires the `qs` package. It preserves types of string, number, boolean, and date during the query string parsing and stringify
Downloads
70
Readme
Route Query
Next Route Query is a utility library for handling URL query parameters in NextJS applications. It supports NextJS 13 or higher. It preserves types of string, number, boolean, and date during the query string parsing and stringifying process.
Installation
To install Route Query and its dependencies, run the following command in your terminal:
npm install next-route-query
Usage
Server Side
To use Route Query on the server side, you can import parseServerSearchParams
and SearchParams
from the library. Here's an example:
import { parseServerSearchParams, SearchParams } from "next-route-query";
function Page({ searchParams }: { searchParams?: SearchParams }) {
const params = parseServerSearchParams<{ search: string; sizes: number[] }>(
searchParams
);
// Now you can use the params in your server side logic
}
Client Side
On the client side, you can use the useRouteQuery
hook from Route Query. Here's how you can use it:
import { useRouteQuery } from "next-route-query";
function Page() {
const [params, setParams] = useRouteQuery<{
search: string;
sizes: number[];
}>();
// Now you can use the params in your client side logic
}
Creating Query Strings
To create a query string from an object, you can use the stringify
function from Route Query:
import { stringify } from "next-route-query";
const query = stringify({
search: "hello",
sizes: [1, 2, 3],
});
// This will output: ?search=hello&sizes[0]=nr:1&sizes[1]=nr:2&sizes[2]=nr:3
Parsing Query Strings
To parse a query string into an object, you can use the parse
function from Route Query:
import { parse } from "next-route-query";
const params = parse("?search=hello&sizes[0]=nr:1&sizes[1]=nr:2&sizes[2]=nr:3");
// This will output: { search: "hello", sizes: [1, 2, 3] }