Connect your domain to Vercel

Vercel | September 29, 2024 | 4 mins read

Connect your domain to Vercel

Your website needs its own "address" so lets give it one. In this tutorial, I will go over where to find a domain, how to add it to your Vercel account and how to connect your domain to your project.

What do google.com and oadev.ca (shameless plug) have in common? Yeah they are both websites with domains. So how do we connect a domain to your website

Step 1: Get a domain

The home page of Namecheap, mainly focusing on the search bar which can be used to search for any available domain addresses.

I know sounds obvious but this is how I get my domains. I start with going on Namecheap and searching for the domain that I want.

A search query on Namecheap, for ILikeChickenNuggets. A list of domains that can be purchased along with the query.

After searching for a domain you will see a page with available domains with changes in the suffix (.ca/.com/etc).

My domain list on Namecheap, where oadev.ca is focused on.

I will not be buying any of those domains... but I will be using my domain (oadev.ca). Once you have created an account and purchased your domain, go to your Dashboard > Domain List. There you will find your domain.

Step 2: Add your domain in Vercel

A Vercel dashboard with the domain tab highlighted

Lets move over to Vercel. Go to your dashboard on Vercel and select the Domain tab

A Vercel dashboard, specifically the Domains tab

In your domain tab you should be able to see a few options on the right side of "Domains" , select "Add Existing"

A list of the most recently modified Vercel project with the option to select them to add as a domain on the right side

A list of the most recent Vercel projects appears with the option to select which project you would like the add the domain to. Select which project you would like to add your domain to and click Continue.

Add Domain modal, with the input field containing the domain oadev.ca

Now you can input your domain, in this case I will be using oadev.ca.

After submitting a domain, you will be send over to the project you have selected with the configuration of your domain.

Vercel dashboard, domain section of the Vercel project oadev with the configuration settings for the domain.

In this case www.oadev.ca is not automatically included in the configuration, to have that happen I will request for it.

After submitting my domain again, I am prompted to select how it will be used. In this case, I would select "Add www.{domain}.ca and redirect {domain}.ca to it.

Step 3: Configure DNS Settings of your domain

The final step is now to add these records to your DNS records.

A modified DNS record changed to match the config from Vercel

For {domain}.ca:

Select A Record for the Type
Input @ for the Host/Name
Input 76.76.21.21 for the Value

For www.{domain}.ca:

Select CNAME Record for the Type
Input www for the Host/Name
Input cname.vercel-dns.com. for the Value

After you are all done, click the "SAVE ALL CHANGES" button at the bottom.

Successful configuration of the oadev.ca domain in Vercel

Give it some time (in this case it took 5 mins) and your domain should be connected to your site. If there are any issues, check to ensure the values have inputted correctly from the domain to the DNS changes.