Setting up Namecheap domain in Vercel

Setting up Namecheap domain in Vercel

Created
Mar 20, 2021
Description
A brief tutorial to add a domain in your Vercel app
Tags
Tutorials
Next.js
Namecheap
Public
Public
 
Last week I was working setting up this blog, and I decided to migrate the app from Netlify to Vercel. Vercel provides a nice looking UI to manage everything related with our web apps and makes really easy to set a custom domain rather than the default app-random.vercel.app that is automatically assigned to each project.
 
Adding a domain is something I've done several times in the past, yet everytime I seem to have to look around on how to do it. So I decided to document the process of adding a Namecheap domain to Vercel in the hopes that it helps others that are trying to do the same.

Vercel Setup

1. Selecting Your Project

On the dashboard, select the project to which you would like to assign your domain.
 
notion image
 
Go to Settings and select Domains menu item.
 
notion image
 

2. Entering Your Domain

From the Domains page, enter the domain you want to add.
 
notion image
 
Once you added a valid domain, you will see (most of the times) the domain added below with an ugly Invalid Configuration error. This is due to we still need to set up Namecheap to point Vercel's Nameservers.
 
notion image
 
You will also see a tab named Nameservers. Click on it and you'll see the nameservers we will need to add to our domain in Namecheap.
 
notion image

Namecheap Setup

Once that our domain is added in Vercel, we just need to add the nameservers in Namecheap in order to finish the setup.
 
Once you are logged into your Namecheap account, go to Domain List on the sidebard, select the domain you want to configure and click on Manage.
 
notion image
 
Now find the NAMESERVERS section, click on the dropdown and select Custom DNS. This will reveal an input where you can input the Vercel's Nameserver addresses. Once you added the nameservers, click on the the green checkmark at the rigth and you are done! 😄
 
notion image
 
Hope this guide was useful for you! Let me know in the comments if you have any question.
 
👉🏽
If this post helped you, please consider follow my journey on twitter @jorgearuv