So you’ve built an awesome web app and deployed it to Vercel. But sharing your app with a long, random URL just doesn’t hit the same as yourbrand.com. Here’s your comprehensive guide to connecting a custom domain (from Hostinger) to your Vercel project—and, crucially, understanding what’s going on under the hood as a developer.

Table of Contents

  1. What is Domain Mapping?
  2. DNS Records Crash Course for Developers
  3. A vs CNAME—What's the Difference?
  4. The Developer Workflow: Mapping Your Domain to Vercel
  5. Recap: How the Browser Finds Your Site
  6. Extra: HTTPS and SSL Worries? Vercel Has You Covered
  7. Common Pitfalls and Fixes
  8. Conclusion

1. What is Domain Mapping?

Domain mapping is the process of connecting a human-friendly domain (like myproject.com) to the actual web service (your Vercel-hosted app) so that anyone typing your domain arrives at your live site.

Why do it?

  1. Branding: Custom domains are memorable and professional.
  2. Trust: Users prefer custom domains over random project URLs.
  3. Production-Readiness: Most public-facing sites need a “real” domain.

In essence, domain mapping links your domain to the “real” location of your deployed app.

2. DNS Records Crash Course for Developers

DNS (Domain Name System) acts like the internet’s phone book: given a domain name, it tells browsers where (IP address) to find the website content.

As a developer, you need to know:

  1. Your domain registrar holds your DNS records. (Here: Hostinger)
  2. When you “map” a domain, you’re telling DNS which server (Vercel) is responsible for serving requests.
  3. DNS records are simple instructions for directing traffic:
  4. Example: “When someone asks for yourdomain.com, send them to the server at 76.76.21.21.”

The main record types you’ll use:

  1. A record: Maps a domain to a specific IP address (IPv4).
  2. CNAME record: Maps a subdomain to another domain name (not to an IP).

3. A vs CNAME—What's the Difference?

A Record

  1. Points directly to an IP address.
  2. Used for: The root domain—e.g., yourdomain.com.
  3. Example:

Type: A
Name: @
Value: 76.76.21.21
  1. Here, @ stands for the root domain (i.e., no subdomain).

CNAME Record

  1. Points to another domain name, not an IP.
  2. Used for: Subdomains like www.yourdomain.com, app.yourdomain.com.
  3. Example:

Type: CNAME
Name: www
Value: cname.vercel-dns.com
  1. This means, “When someone visits www.yourdomain.com, first check the alias target, which leads to Vercel.”

In Practice (Vercel):

  1. Root Domain (yourdomain.com) → Use an A record with 76.76.21.21.
  2. Subdomain (www.yourdomain.com) → Use a CNAME record with cname.vercel-dns.com.

4. The Developer Workflow: Mapping Your Domain to Vercel

Step 1: Prepare Your App

  1. Deploy your site on Vercel with a generated URL like my-app.vercel.app.

Step 2: Add Your Custom Domain in Vercel

  1. Go to your Project > Settings > Domains.
  2. Add yourdomain.com.
  3. Vercel will immediately display the DNS records you need to add to Hostinger.

Step 3: Update DNS Records at Hostinger

  1. Log in to Hostinger, go to your domain’s DNS Zone Editor.
  2. Add/Update Records:
  3. A Record for root (@):
  4. Set to 76.76.21.21 (this is Vercel’s host IP).
  5. CNAME Record for www:
  6. Set to cname.vercel-dns.com.
  7. Double-check: Only one A record for root. If others exist for the same name, remove them to avoid conflicts.

Step 4: DNS Propagation

  1. DNS changes need time to spread (~minutes to 24 hrs).
  2. Meanwhile, go back to Vercel and wait for the domain to show as verified/active.

5. Recap: How the Browser Finds Your Site

Let’s trace what happens when a user types yourdomain.com:

  1. DNS Lookup: Their device asks Hostinger’s DNS, “Where is yourdomain.com?”
  2. DNS Responds: Hostinger says, “Go to 76.76.21.21.”
  3. Browser Requests: The browser goes to Vercel’s servers at that IP.
  4. Vercel Routes: Vercel checks its config. It sees the domain is linked to your project and serves your site.
  5. User Sees Site: Like magic, your users see your latest React/Vue/Next.js app.

6. Extra: HTTPS and SSL Worries? Vercel Has You Covered

  1. Do I need to buy/configure SSL?
  2. No! Vercel automatically issues free, auto-renewing SSL certificates for all mapped domains.
  3. Result: Your site is served securely (over HTTPS) without you writing or configuring anything extra.

7. Common Pitfalls and Fixes

  1. Multiple A Records: Remove any extra A/AAAA records for root (@), leaving only 76.76.21.21.
  2. Typos in DNS Records: Double-check target values for copy-paste errors.
  3. Old DNS Caching: Use Google DNS or flush local DNS cache if changes don’t show up quickly.
  4. Forgetting www: If you want both yourdomain.com and www.yourdomain.com to work, add both in Vercel and DNS.

8. Conclusion

As a developer, mapping your domain to Vercel isn’t just copy-pasting records—it’s solidifying your app’s brand, trustworthiness, and professionalism. Understanding why A and CNAME records work the way they do helps you debug and confidently own your deployment.

No DevOps team required—own the stack, own the process, and launch your project with pro-level polish.

Have questions or ran into an issue? Drop them in the comments below, and let’s build together!