Typically when building Single Page Applications or simple websites for people or small businesses, I default to using NextJS as well as Vercel simply because its comfortable and easy to set up. This is a small guide based on my experience with deployment on custom domains as well as other subdomains.

Deployment

  1. Go to and add a new project
  2. Configure Vercel with your Github account
  3. Go to your GitHub Account Settings
  4. Under Integrations, click on Applications

integrations

  1. Under Vercel click Configure
  2. Give it access to the specific repository that contains your project code

select

  1. Head back to Vercel and complete the deployment from the admin UI
  1. You should now have a link that you can access your app, e.g. your-app.vercel.app

Setting up a custom domain

  1. Find your desired domain name from , or any other domain name registrar
  2. Head back to Vercel and add the new Domain
  3. At the Domains tab, we can tap on the NAMESERVERS tab and copy these name servers for the next step
  4. Log into your Namecheap admin console and click on Manage for your recently purchased domain name

select

  1. Find the NAMESERVERS section and we will now populate the Custom DNS with Vercel's own name servers

select

  1. After clicking on the green checkmark, you have successfully set up the custom domain to route to your site!

A bit about DNS records

There may be scenarios where you would like to put your site under an existing domain that has been purchased. In this case it is important to figure out what DNS records are, particularly A and CNAME records.

DNS stands for Domain Name System, which helps to map human readable links like jontay999.com to a computer readable IP address, e.g. 1.2.3.4. This mapping is known as a DNS record which are stored on special DNS servers, the main examples of records

  • A record: associates a domain name to an IP address. For example, If I want jontay999.com to point to 1.2.3.4 I will add an A record
jontay999.com     A        1.2.3.4
  • CNAME record (canonical name): associates an alias (subdomain) to the canonical (main) domain name. In other words it maps a human readable name to another human readable name. For example, if I own the site jontay999.com and I have developed a bunch of games which are deployed on a different host provider. I want to host the games at a new subdomain games.jontay999.com, so I will use a CNAME record in this fashion
games     CNAME        jontay999.com.

The "Name" field is set to games, because the target subdomain is games.jontay999.com and the "Value" field is set to "jontay999.com" with a period at the end, indicating the canonical domain name

By creating this CNAME record, when someone tries to access games.jontay999.com, the DNS server will look up the CNAME record and find the canonical domain name "jontay999.com." It will then redirect the request to the IP address associated with "jontay999.com," which is the server where my games are actually hosted

Essentially, the CNAME record acts as an alias or a pointer, allowing the subdomain "games.jontay999.com" to inherit the IP address of the canonical domain "jontay999.com." This way, visitors accessing "games.jontay999.com" will be directed to the appropriate server.

Use Case

Recently, I developed a site for a company but they had trouble accessing it from their company firewall. In the process of trying to find the website IP to whitelist, I realised that Vercel uses Dynamic IP addresses to ensure maximum scalability across different regions (read more ). Sometimes, firewalls block sites that use dynamic IP addresses which makes maintaining robust whitelists and blacklists challenging, among a host of other reasons. To resolve this, we decided to move the site into a company subdomain.

In order to resolve this on Vercel, we have to find the canonical name server for Vercel which is cname.vercel-dns.com (this can be found on the Domains tab). After agreeing on the subdomain, I added this record on Vercel and the company DNS config.

mysite.company-subdomain.com     CNAME        cname.vercel-dns.com.

In order for it to be fully updated, some time may have to elapse before DNS propagation is completed, but that's it!