Logo

dev-resources.site

for different kinds of informations.

Setting up Namecheap domain in Vercel

Published at
3/21/2021
Categories
nextjs
react
namecheap
Author
jorgearuv
Categories
3 categories in total
nextjs
open
react
open
namecheap
open
Author
9 person written this
jorgearuv
open
Setting up Namecheap domain in Vercel

Last week I was working on 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 to 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 every time 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.

dashboard step 1

Go to Settings and select Domains menu item.

dashboard step 1-2

2. Entering Your Domain

From the Domains page, enter the domain you want to add.

Domain step

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.

Domain step 2

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.

Domain step 3

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 sidebar, select the domain you want to configure, and click on Manage.

Namecheap step

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 green checkmark at the right and you are done! πŸ˜„

Namecheap step 2

Hope this guide was useful for you! Let me know in the comments if you have any questions.

If this post helped you, please consider following my journey on Twitter

namecheap Article's
25 articles in total
Favicon
Run NextJS App in shared-hosting cPanel domain!
Favicon
Get a free SSL certificates for your shared-hosting cPanel domain!
Favicon
Why is My Card Declining on Namecheap But I Have Money? (And How EverTry Can Help)
Favicon
Connect Namecheap Domain to KnownHost
Favicon
Deploy Laravel Projects to Namecheap Server on Github Push with 3 Easy Steps (The only tutorial you would every need)
Favicon
Set up Domain name in Vercel Project
Favicon
How to Get a Free Custom Domain as a Student
Favicon
Deploy Next.js to Contabo VPS
Favicon
Moving DNS Records from NameCheap to Cloudflare
Favicon
How to link your Namecheap domain to GitHub Pages
Favicon
How to deploy a Django app on an AWS EC2 instance
Favicon
How to connect your domain from Namecheap to Amazon Route 53
Favicon
Setting up Domain with Namecheap & Netlify
Favicon
How I could manage (without permission) someone else their Shopify domain via Namecheap.
Favicon
Deploying Django Application on AWS with Terraform. Namecheap Domain + SSL
Favicon
Change Netlify Domain to Namecheap using Azure DNS Zone
Favicon
Deploying and Hosting a Custom Domain on Vercel
Favicon
Setting up Namecheap domain in Vercel
Favicon
#Hosting With cPanel React App
Favicon
Setting up a Namecheap domain on Begin.
Favicon
Let’s Encrypt SSL certificate in Namecheap AutoRenewal – Verified & working – Using ACME.sh
Favicon
How to configure custom Namecheap domain to GitHub Pages
Favicon
β€œDNS” URL redirect records considered harmful
Favicon
Custom domain name, Heroku, and SSL
Favicon
Getting a Free Domain For Students

Featured ones: