next-typesafe-url

Fully typesafe, JSON serializable, and zod validated URL search params, dyn...

README

next-typesafe-url


_Now with full support for app directory and server components!_

next-typesafe-url-example

Fully typesafe, JSON serializable, and zod validated URL search params, dynamic route params, and routing for NextJS.

Whats wrong with curent solutions?


Routing


Next.js's non-typesafe routing can lead to runtime errors and make it difficult to catch routing-related issues during development, as it relies on string literals instead of type-safe constructs.

Search Params



Traditional Search Param APIs usually assume a few things:

- Search params are always strings
- They are mostly flat
- Serializing and deserializing using URLSearchParams is good enough (Spoiler alert: it's not, it sucks)

Typesafety Isn’t Optional


How does next-typesafe-url solve these problems?


- Fully typesafe routing- all the way from the route, to the route params, to the search params
- Search params are JSON-first, so you can pass strings, numbers, booleans, nulls, and even nested objects and arrays
- Search and route params are validated at runtime using zod, so you can be sure that the data you get matches the schema you expect

Installation


  1. ```bash
  2. npm install next-typesafe-url
  3. # or
  4. yarn add next-typesafe-url
  5. # or
  6. pnpm add next-typesafe-url
  7. ```

Usage



Issues


Please open an issue if you find a bug or have a feature request.
You can also DM me on twitter @ethanniser with any questions or concerns.

Contributing


All contributions are welcome! Please open an issue or submit a PR.

License



TODO


- add tests
- [remix-routes style typescript plugin](https://github.com/yesmeck/remix-routes/tree/master/packages/typescript-remix-routes-plugin) to improve autocomplete and add 'go to definition' to route string (would take you to the route file)