How to Deploy a Next.js App on Vercel for Free

In Techmoro, an article is there that explains the steps for deploying a Next.js app as static pages on a cloud server. But this has some limitations and it is also not the recommended method. Here in this article, we are explaining the simple steps to deploy a Next.js app on Vercel for free.

Prerequisites

Before continuing this article, I assume that you have a basic idea about:-

• Basic knowledge about the terms in web development/programming
• Node.js
• Next.js framework
• Basics of Git
• Basics of purchasing a domain name

What we will learn

Here in this article, we will learn to:-

• Start a new Next.js project
• Adding the project to a GitHub repository
• Deploying this Next.js on Vercel
• Purchasing a custom domain name
• Connecting the custom domain with our app

Start a new Next.js project

After successfully installing Node.js on our system, we can easily create a new Next.js project using the below command.

npx create-next-app nextjs-demo-app

This will create a new project named nextjs-demo-app.

We can enter the directory and open the project with Visual Studio Code or any other code editor.

Note: We must install VS code on our system before executing the code. command below.

cd nextjs-demo-app
code .

This will open our Next.js project in VS code as shown below.

Ignoring ESLint

When ESLint is detected in our project, Next.js fails to build when errors are present. So we need to ignore the eslint rules by changing the nextjs configuration in the next.config.js file.

// next.config.js

module.exports = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
};

Add the project to a git repository

We need to add this Next.js project to a git repository for deploying it to Vercel. Here I am using GitHub and you can use any other Git repository manager.

I have already written an article on the topic of Adding An Existing Project To GitHub Or Bitbucket. You can refer to this for detailed information. Here also we will discuss the steps.

First login to GitHub and create a new repository.

Here I am making the project public that means it can be accessed publically. You can choose private if you want.

This will lead us to the below screen and that explain the steps to add our project to this repository.

Now from our project directory, execute the below commands in the terminal/ Command Prompt to add our project to the GitHub repository created.

git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/techomoro/nextjs-demo-app.git
git push -u origin main

Executing these commands will upload our project to the GitHub repository we created. Now we can easily deploy this project to Vercel.

Deploy our Next.js project on Vercel

Signup for an account on Vercel. It will be great if you choose the Signup with Github option.

Import the repositories from our Github account.

Give Vercel the permissions to read the repositories in our GitHub account.

This will list out all the repositories in our GitHub account. Import the repository next.js-demo-app that we created earlier.

Here in this article, we are discussing the free method of deploying a Next.js app on Vercel. Creating a team to handle the project requires a pro plan and so that I am skipping it.

Now deploy the project without changing anything.

So our app is deployed and now can see a Congratulations window.

Clicking the Go to dashboard here will show the dashboard of our app in Vercel.

Here on this screen, we can see that Vercel is providing us with a subdomain address for accessing the app we created. I have given this URL below.

https://nextjs-demo-app-beta.vercel.app

Add the environment variables

Some Next.js projects contain environment variables. In Next.js, we usually store these in .env.local file. As a default, this file is ignored by GitHub.

This will lead to the error “TypeError: Only absolute URLs are supported” while deploying.

To solve this, we need to add our environment variables on Vercel.

To do this, in the Settings tab, click on the Environment variables option. Now add the name, value, and save.

Add a custom Domain name

We can see a button named View Domains at the right top and clicking here will lead us to a page to connect a custom domain with our app deployed on Vercel. Add the domain and click the recommended options from the below screen.

This will show the below screen that shows a message “Invalid Configuration“. So we need to add the A record and CNAME record in our DNS for completing the configuration.

• 

Buy the domain from Godaddy

We can buy the domain from any Domain registrar service. Some of them are listed below.

• Godaddy
• Hostgator
• Domain.com
• Porkbun

Here I am choosing Godaddy to purchase the domain. The steps are provided below.

Search for a domain

Log on to https://www.godaddy.com/ and search for a domain. If it’s available add it to the cart.

Choose the bundle options

Godaddy will force you to buy domain privacy protection, email address, and hosting with the domain. Here I prefer skipping those bundle options.

Complete the purchase

Complete the purchase by entering the billing information and payment details. You can purchase the domain for a minimum of 1 year to 5 years. Here I am buying it for 1 year.

Change the DNS

Now from the top menu, select My Products. You can see the purchased domain there.

Click on the DNS and add two records provided by Vercel here.

Now, in our Vercel dashboard, we can see that the domain connection is done successfully.

Access our app with the custom domain

Now we can access our Next.js app with the custom domain name (www.mynewblog33.com). Next.js will take care of the SSL certificate also.

Summary

So here in this article, we discussed the steps to deploy a Next.js app on Vercel for free. We also provided the steps to add the project to a GitHub repository. In the end, we connected a custom domain address with our app.