Deploy a Next.js App with Private Dependencies in Vercel: A Simple Hack

In some projects, we use private dependencies. This will make our code clean and also protected. But when coming to hosting it, some providers will limit it. Here, we will discuss a simple hack to deploy a Next.js app with private dependencies in Vercel.

The support team itself provides for the use of private dependencies in Vercel. The link is given below.

How do I use private dependencies with Vercel?

But in my case, I was hosting a private dependency in Bitbucket. The official methods described in the above link did not work. This is the reason I am writing this article.

Prerequisites

Before continuing this article:-

• I strictly recommend you to read my previous article, How To Deploy A Next.Js App On Vercel For Free.
• The article will show you the way to host a simple Next.js app on Vercel. In our case, it’s a bit different.
• The reader should have an understanding of the Git, node_modules directory, package.json file, .gitignore file, etc.

What we will learn

In this article, we will learn the solution or a simple hack to deploy a Next.js app with private dependencies in Vercel. Before continuing, you should know that the method is a simple hack and not the one recommended by Vercel.

The default way of deploying a Next.js app to Vercel

After referring to the previous article that I mentioned in the prerequisite section, you will get an idea, of how to deploy a Next.js app on Vercel. I am giving the link once more.

How To Deploy A Next.Js App On Vercel For Free.

We will add our project to a git repository and access that directory from Vercel.

The problem when there are private dependencies in our project

We know that the node_modules directory of our project is ignored from pushing to git.

From Vercel, it installs the npm packages and the node_modules directory is created from there.

Because our Next.js app contains private dependencies, Vercel can not install them.

Suppose our project is using a private dependency called my-private-repo and we are trying to deploy our project on Vercel.

Vercel will show up the error message like below and cancel deploying the project.

Actually, we are giving the credentials in the package.json file itself, but unfortunately, Vercel can not use it.

Solution for this problem (A simple hack)

For experts, I can explain the solution in a single sentence. Deploy the Next.js project to Vercel including the node_modules directory.

For others, please continue the article.

Vercel installs the packages for our project by taking the list of packages from the package.json file of our app. But we will skip this step. We are not giving Vercel the command to install dependencies.

Other than that, we will add the node_modules directory itself to our git repository and deploy it with Vercel. So that, there will be no issues with Vercel in installing private dependencies.

Remove node_modules from the .gitignore file

From our Next.js project, comment out or remove the node_modules in the .gitignore file. So that the .gitignore file will look the same as below.

/build
# /node_modules
package-lock.json
/build
/.next
/.env.local

Here we are saying to the git to track the node_modules directory when pushing the project to our repository. So in VS code, our project should be like this.

Push the changes to our git repository.

Now, add all files, commit your changes and push the project to our git repository. The below commands will do this for us.

git add .
git commit -m "node_modules added"
git push

Override the install command from Vercel

Now deploy the project to Vercel. Note that, we will reach a step to configure our project.

Click on the Build and Output Settings and override the INSTALL COMMAND. Leave the input field empty.

So that the yarn install or npm install command will not execute in Vercel. We already have the node_modules directory within our project itself.

Now click on the Deploy button and our Next.js app will build successfully without any errors.

Summary

So in this article, we learned a simple hack to deploy a Next.js app with private dependencies in Vercel.