Discover Next.js typesafe and shallow search params for your project.
- NextJS 13/14+ App router
- Typesafe, supports type hints
- Shallow routing support
- Stateful
- Supports customizable search string format, see: query-string
foo[]=1&foo[]=2&foo[]=3foo[0]=1&foo[1]=2&foo[3]=3foo=1,2,3foo=1|2|3foo[]=1|2|3&bar=fluffy&baz[]=4foo=1&foo=2&foo=3- etc
npm install next-typed-search-paramsyarn add next-typed-search-paramsAt top client component:
'use client'
import { configure } from "next-typed-search-params";
configure({ arrayFormat: "bracket-separator" })- arrayFormat - optional, "bracket" by default
- arrayFormatSeparator - optional, "," by default
import { useSearchParams } from "next-typed-search-params";
export const Component = ({}: PropsType) => {
const [searchParams, setSearchParams] = useSearchParams((z) => ({
productId: z.coerce.number().array(),
value: z.coerce.number(),
date: z.coerce.string()
}));
const handleClick = () => {
setSearchParams({
...searchParams,
value: searchParams.value + 1
})
}
return (<button onClick={handleClick}>click {searchParams.value}</button>);
};If the Zod parse fails, the search parameter will be set as undefined.