API routes with Vercel Serverless Functions and NextJS
Tags: nextjs, javascript, react, serverless
Published: 2022-09-23 05:07:40

**Introduction**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhttrymc8zfucgntdly7.jpg)

You use Next.js for your frontend Applications. Did you also know that you could use Next.js to create a Node API and essentially have a back end application 😃!!!. 

That's right no need to set up a separate back end application using Nodejs or other webframeworks like Express JS or Fastify.

So I did know about this by reading the docs, but something that stumbled me a bit was there were apparently two choices that are presented to us.

First being Vercel's Serverless Functions and second being  Next.js API routes. Both allow you to serve API endpoints 🤔. 

Vercel is the company behind Next.js , and for me initially the line was blurry because both implementations seemed very similar(spoiler 🚨 this is not true). So in this article we will go over the differences between the two approaches, which approach might be right for you and how to move forward with those approaches. 

**Option1: Serverless functions with Vercel**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r33qlzul2o02s7extve.jpg)

Creating Serverless functions with Vercel has only one package dependency and that is Vercel and you don't need Next.js. This a zero configuration deployment. 

To deploy Serverless Functions, you can put files with
extensions matching [supported languages](https://vercel.com/docs/concepts/functions/supported-languages) and exported functions in the `/api` directory at the root of your project.

**Pros**
- Serverless functions  with Vercel would be great if you are looking to create Microservices and have multiple applications consume your API.
- Supported Languages with Vercel include _Node.js_, _Go_, _Python_ and _Ruby_. More info and examples on this from official docs [here](https://vercel.com/docs/concepts/functions/supported-languages)

 **How to install/use Vercel Serverless Functions**
So if you feel Option 1 is the choice you are looking for here are some resources to get Started

- A great step by step detailed blog post [here](https://www.frontend-devops.com/blog/build-deploy-a-vercel-api) written by [TheHouseAVAX](https://twitter.com/TheHouseAVAX)
- A great [Video Tutorial](https://www.youtube.com/watch?v=BhArBPtW6Ms) by [James Perkins](https://twitter.com/james_r_perkins) 

- Vercel's official documentation on Serveless functions [here](https://vercel.com/docs/concepts/functions/serverless-functions)


**Option2: Creating API routes with Next.js**
 Next.js API routes also give us the ability to create 
 serverless API routes and are pre configured to be the perfect backend companion to a Next.js app. Next.js is needed as a dependency for this.

Creating API routes with Next.js can be done by creating a folder called  `/api/` in the `pages` Directory (not root directory like for Option 1) and adding files to it. Any file inside the folder `pages/api` will be treated as an API endpoint.
 
- These bundles are server side only and won't increase your client-side bundle size. So the API folder will never be shipped to your browser.

**Caveats**

- They by default are _same-origin only_, meaning if your domain is https://mySite.com/, then requests from that domain **ONLY** can access your API. If you would like other apps (from other domains) to access this API it would be denied. You can customize such behaviour by wrapping the request handler with the CORS middleware meaning, we can allow some other trusted sites apart from http://myDifferentSite.com/  to access the API

**How to use Next.js API Routes**
Some resources for Option 2

- The Next.js documentation is truly the gold standard [here](https://nextjs.org/docs/api-routes/introduction). It's concise, easy to digest and covers all options for you.

- A free video tutorial on Egghead.io [here](https://egghead.io/lessons/react-build-straightforward-api-with-next-js-api-routes)


**Similarities** 
- The way the code is written for both these options is very similar so it's nice to have that consistency from both these options.
- So you could choose either option and not have to relearn too much. 

**Conclusion**
- Under the hood both options (1 and 2) are the same: It's an abstraction over Lambda and other serverless functions that is meant to be a zero configuration service.
- If the API you are building is exclusively for your Next.js Front-End companion App then Next.js API routes are the way to go. It is the perfect backend companion that by default restricts origin and is usable with middleware.
- You could technically achieve the same result with both options but their configurations cater to different audiences / usecases.