Effortlessly Sync Your NextJS Frontend with Backend Using OpenAPI: A Step-by-Step Guide to Generating SDKs
Github repo you can use as a template with everything setup: GitHub Repo
One of the biggest problems when using a separate frontend and backend is keeping the API documentation in sync. If you're using TypeScript, you have the added problem of keeping the types in sync. This is where OpenAPI comes in. OpenAPI is a specification for building APIs. It allows you to define your API in a standard way, and then generate documentation, client libraries, and server stubs from that definition.
If you have a backend with an OpenAPI specification, you can use it to generate a client library for your frontend. This means that you can keep your frontend and backend in sync, and you can use the same types on both sides. If you dont and are currently exploring options, you can use NestJS to create a backend with OpenAPI specification. You can check out the following article for automatic OpenAPI docs creation: Getting Started with NestJS
This a simple yet effective solution that always works with me, and it also enables api first development for your backend, which personally has led to better backend design decisions
There are a few tools that can generate a client library from an OpenAPI specification. One of the most popular is openapi-typescript for creating types and openapi-fetch for fetching the data. Both the libraries are actively maintained and are very popular in the community.
First, we need to create a new NextJS app. We can do this using the following command:
This will create a new NextJS app and start the development server. You can then open the app in your browser and see the default NextJS app.
Next, we need to generate the TypeScript types from the OpenAPI specification. We can do this using the openapi-typescript library. First, we need to install the library:
Then, we can use the openapi-typescript command to generate the types. We need to pass the URL of the OpenAPI specification, and the output directory for the types. For example:
Add the following script to your package.json:
Then run the following command:
npm run generate:sdk
This will generate the TypeScript types from the OpenAPI specification and save them in the src/app/petstore.ts file.
Create a file api.ts in the src/app directory with the following content:
This will create a client library for the OpenAPI specification. We can then use this client library to make requests to the backend.
We can now use the client library to make requests to the backend. For example, we can create a new React component that fetches the list of pets from the backend:
That's it! We have now generated a client library from the OpenAPI specification and used it to make requests to the backend.
In this article, we learned how to generate a client library from an OpenAPI specification and use it in a NextJS app. This allows us to keep the frontend and backend in sync, and use the same types on both sides. This can be very useful when building a separate frontend and backend, and can save a lot of time and effort in keeping the API documentation and types in sync.
One more thing, API first development is a great way to design your backend, and this approach enables that. It's a win-win!