Next.js plugin for automatic API types using SWR and TypeScript

[mohsen1]

next-typed-api-with-swr

I just published next-typed-api-with-swr Next.js plugin that makes calls to useSWR strongly typed based on types of API handlers in pages/api directory.

It works by generating a TypeScript file that contributes more overloads to useSWR function types. Those overloads are looking for the API path you're using. For instance calls to "/api/users" are strongly typed based on the types of API handler in pages/api/users.ts file.

To-do and ideas

I want to make it work for more use cases. As of now I have the following ideas

• make it work with path parameters using TypeScript Template Literal Types so calls like useSWR("/api/users/123") is also strongly typed
• Extend the overloads to accept configuration param to useSWR
• Generate an OpneAPI spec from API types using TypeScript to JSON Schema convertors (this might be out of scope of this plugin but the idea started here.)

Looking for feedback

If you are using useSWR and TypeScript in yoru Next.js project, please give this plugin a shot and let me know what works and what doesn't work for you.