NextJS is a popular React framework for building server-rendered React applications. It provides a feature called “API Routes” that allows you to create serverless functions within your NextJS application to handle API requests.
API Routes in NextJS provide a convenient way to create server-side logic for handling HTTP requests, such as fetching data from a database, processing form submissions, or integrating with third-party APIs. These API Routes are automatically deployed as serverless functions and can be accessed via API endpoints.
To create an API Route in NextJS, you can create a file with the .js or .ts extension in the pages/api directory of your NextJS project. This file represents the API endpoint that you want to create. For example, you can create a file called myApi.ts in the pages/api directory to create an API endpoint with the URL path
This is quite easy to setup and great to use. Except when the application grows and you need to validate the data coming from the client.
For instance, if you want to have the same endpoint and handle the GET and the POST request, you can do something like this:
And if you need to validate the data coming from the client, you will need to add some logic to check if the data is valid or not.
next-api-decorators comes in handy.
Main caveat: you handler needs to be a class rather than a function.
What you need to install
So now, you can create a class that will handles our previous requests like so:
Way cleaner and easier to read.
Now lets add some validation to our request:
We are using the
class-validator to validate our request body.
Now when you call your endpoint, you will get a 400 error if your body is not valid. So quite easy to use. Now you can just insert your data in the database for instance without having to write extra code for validation.
In conclusion, NextJS API validator is a valuable tool for building secure and robust APIs in a TypeScript context. By leveraging its features for type checking, data validation, and sanitization, you can create APIs that are more resilient to common security risks, provide better error handling, and deliver a more reliable and secure user experience. Incorporating NextJS API validator in your NextJS TypeScript projects can greatly enhance the overall quality and security of your APIs.