Introduction

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

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 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

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 written by TheHouseAVAX

• A great Video Tutorial by James Perkins

• Vercel's official documentation on Serveless functions here

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. It's concise, easy to digest and covers all options for you.

• A free video tutorial on Egghead.io here

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.