As a frontend developer, I often work with React and Next.js, and one of the challenges I face is managing query parameters. Next.js provides a powerful router system, but handling query parameters can become cumbersome and error-prone. Fortunately, with the help of Jotai and zod, I've found a solution that allows me to manage query parameters in a reusable and type-safe way.
Jotai is a lightweight state management library that provides a simple and flexible way to manage state in React applications. It represents state as atoms, which are observable and subscribable values. When an atom is updated, any React components that are associated with it will automatically re-render.
Next.js is a React-based lightweight framework that provides a powerful router system, allowing you to handle client-side and server-side routing easily. Using the useRouter
hook, you can access the router information, including the URL path and query parameters.
zod is a TypeScript-first data validation library that provides a sim