How to Supercharge Your APIs with TypeScript in Next.js 14
In today’s fast-paced development environment, building and managing APIs efficiently is more crucial than ever. Whether you’re a beginner or a seasoned developer, you might be familiar with creating REST APIs. However, with the evolution of frameworks like Next.js, there are now multiple ways to handle APIs.
In this blog, we’ll explore 3 ways you can make your APIs fully type-safe and modular using TypeScript in Next.js 14, enhancing your development process and code quality.
The Traditional Approach: REST APIs in Next.js
When working with Next.js, the most common way to create APIs is by using the REST architecture. These APIs are typically housed within the pages/api directory. Let’s take a quick look at how REST APIs are set up in Next.js:
Creating REST APIs
In a typical Next.js application, you might define your API routes in the api/ping/route.ts file like this:
filename: api/ping/route.ts
This simple setup demonstrates two routes: a GET handler and a POST handler. Both of them returns a different message. This basic structure is sufficient for many applications, but it lacks some critical features such as error handling, loading state management, and more sophisticated data validation.
Calling REST APIs in the Frontend
In the UI, calling these APIs can involve a fair amount of boilerplate code, especially when dealing with state management for loading, errors, and responses. Typically, you might use the fetch API to make these requests, which requires additional code to handle these states:
filename: restapi/page.tsx
Using SWR for GET and POST Requests
Here we can leverage to controllers created in api/ping/route.ts so we need not define new controllers anymore.
SWR automatically manages the data fetching, error handling, and loading states, significantly reducing the code you need to write and maintain.
While SWR initially supported only GET requests, it now also provides support for mutations (POST, PUT, DELETE, etc.). Here’s how you can use SWR to handle GET and POST requests:
filename: swrapi/page.tsx
This setup allows you to manage POST requests with minimal code, leveraging the power of SWR to handle various states.
Creating and Using API Requests with React Query
React Query does similar things as SWR, however they are not built to work with existing handlers defined in NextJS API folder. We have to make separate controllers for them.
Here, In addition to calling hooks from react-query, I have abstracted API calls into custom hooks, making your components cleaner and more focused on rendering UI:
filename: page.tsx
Choosing between SWR and React Query
For the majority of application use cases, I recommend using SWR as your primary package. It has a gentle learning curve and offers all the features needed to build nearly 90% of applications. You can trust SWR for its reliability and seamless compatibility, as it’s developed and maintained by the creators of Next.js.
For more complex applications, you might consider using TanStack React Query, a robust library for managing server state in React applications. React Query offers more features out-of-the-box compared to SWR, including built-in support for pagination, infinite scrolling, and more sophisticated caching strategies. However, this power comes at the cost of increased complexity and a larger bundle size.
Conclusion
In summary, Next.js 14 offers several ways to manage APIs, from traditional REST APIs to more advanced libraries like SWR and React Query. By integrating TypeScript into your Next.js project, you can take full advantage of type safety, leading to more maintainable and error-free code. Whether you choose SWR for its simplicity and small bundle size or React Query for its rich feature set, both options will significantly improve your API management experience.
Checkout the demo here — https://github.com/sourabh-youtube/three-api-types-demo
