In Next.js (app router), useSearchParams is a client-side hook that allows you to read the current URL’s query string. It returns a read-only version of the URLSearchParams interface.
Note
The query string is the part of the URL that comes after the question mark
(?), containing key-value pairs separated by ampersands (&).
For example, in the URL https://example.com/products?category=electronics&brand=samsung, the query string is category=electronics&brand=samsung. It consists of two parameters: category with the value electronics, and brand with the value samsung.
To type searchParams, you simply import ReadonlyURLSearchParams from next/navigation and then specify the type of searchParams as ReadOnlyURLSearchParams, like this:
import {ReadonlyURLSearchParams} from “next/navigation”
type MyType = {
searchParams: ReadonlyURLSearchParams
}Last updated on Tuesday, May 14th, 2024