How to host NestJS on Vercel

I wrote this guide because, honestly? The other articles out there either didn’t work or made things way more complicated than they needed to be. If you want to get NestJS running on Vercel without headaches, you’re in the right place.

TL;DR: Just Use My Repo

If you don’t feel like tinkering, you can simply fork my repo where I’ve already done all the work:
👉 RayRemnant/nest-vercel

Clone and use it right away

This repo comes pre-configured with everything needed to deploy a NestJS app to Vercel.

Run the setup script

Use the script.js included in this repo to automatically configure everything for you.
⚠️ Make sure to commit or back up your changes before running the script!

No magic, just typing

The good old ways, follow the steps below.

Step 1: Create a NestJS Project

First, let's install the NestJS CLI globally.

npm i -g @nestjs/cli

Next, create a new NestJS project:

nest new nest-vercel
cd nest-vercel
npm install

Now, let’s make sure it builds correctly:

npm run build
npm run start:prod

Great, we can access the project at localhost:3000. Notice that a /dist folder has been created with our compiled code. But, as you probably know, if we try to deploy it to Vercel as-is, it won’t work. Let’s fix that.

Step 2: Understanding Vercel’s Serverless Functions

Vercel is designed for frontend applications, meaning it expects to serve static files (think HTML, CSS, and JavaScript). But we’re running a backend server, and Vercel doesn’t natively support long-running backend processes.

However, Vercel provides serverless functions, which are essentially small backend scripts that run on demand. To make use of them, we need to place our functions inside the /api folder, which Vercel will automatically turn into endpoints.

For example, if you have api/main.js, it becomes accessible at yourdomain.com/api/main.

We need to make NestJS work with this system.

Step 3: Configure NestJS to Output to /api

By default, NestJS compiles to /dist, let’s change it to /api.

Open tsconfig.json and modify the outDir setting:

"outDir": "./api",

Now, rebuild your project:

npm run build

Check your files—you should now see them in /api instead of /dist. Perfect.

Step 4: Configure Vercel

Now we need to make small tweaks to how Vercel serves our API.

Create a vercel.json file at the root of your project:

{
    "version": 2,
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/api/main.js"
        }
    ],
    "outputDirectory": ""
}

What This Does:

• Rewrites all routes: (/anything → /api/main.js), making sure every request goes through our API.

• Disables Vercel’s default build process: setting outputDirectory to an empty string will instruct Vercel to skip the build step (Vercel docs on output directory). Instead, we commit the build output (/api) of our changes directly into the repo, ensuring that the project is updated smoothly.

Step 5: Deployment Time!

First, install the Vercel CLI. This tool lets us deploy projects directly from the terminal:

npm i -g vercel

Now, deploy the project:

vercel deploy

Follow the interactive prompts to link your project to your Vercel account. Once done, Vercel will give you a deployment URL. Open it—you should see Hello world!. Our NestJS app is live!

Step 6: Fixing Two Common Issues

1. Exposed Root Files

Because this is a static build, Vercel will try to serve everything—including your project files. We don’t want that.

Let’s fix this by adding a .vercelignore file at the root of our project:

# Ignore everything except the /api directory and package.json for dependencies
*
!/api
!/api/*
!package.json

2. Unwanted Endpoints

NestJS compiles multiple .js files, meaning that app.controller.js, app.module.js and app.service.js can be found inside the /api directory, which Vercel will turn into separate endpoints. Trying to access these endpoints will result in a 500 server error.

There’s a solution: bundle everything into a single file.

Start by editing package.json:

"build": "nest build --builder=webpack",

NestJS will now use Webpack for the build process, buuut it will generate the files inside the /dist directory.

Let’s change that by creating a webpack.config.js at the root of our project:

const path = require('path');

module.exports = {
    entry: './src/main.ts',
    target: 'node',
    output: {
        path: path.resolve(__dirname, 'api'),
        filename: 'main.js',
    }
}

This will take src/main.js (and its dependencies) as a source and bundle everything inside /api/main.js.

Now rebuild:

npm run build

Check your /api folder—there should now be a single main.js file. Problem solved!

Final Step: Redeploy

Now that everything is clean and configured properly, let’s redeploy your project:

vercel deploy

We deployed a NestJS project on Vercel, getting rid of the broken endpoints and unnecessary files.

We can now change our code and push changes, which will trigger a Vercel deploy, improving our workflow as developers.

Yippie!