How to Connect a Custom Domain to Vercel Using Cloudflare

Want to use your own domain for a website hosted on Vercel? In this guide, you’ll learn how to purchase a domain, set up Cloudflare DNS, and connect it to Vercel—all in a few simple steps. Whether you’re launching a blog, portfolio, or SaaS product, this tutorial is for you.

What is a Domain?

A domain is the human-readable address of your website—like codingwithmuhib.com. Instead of remembering complex IP addresses like 192.0.2.1, people can type your domain name into their browser to visit your site. Domains are registered and managed through domain providers such as Namecheap, Hostinger, Google Domains, or GoDaddy.

What is Cloudflare?

Cloudflare is a powerful DNS and web performance tool that acts as a middle layer between users and your hosting provider (like Vercel). It provides:

• DNS management
• CDN (Content Delivery Network) for faster global performance
• DDoS protection and security features
• Free HTTPS/SSL certificates

By pointing your domain to Cloudflare, you gain faster loading times, better uptime, and improved security—all for free.

Prerequisites

• A custom domain (from Namecheap, GoDaddy, Google Domains, etc.)
• A Cloudflare account
• A Vercel project

Step 1: Purchase a Domain

If you haven’t already, buy a domain name from a provider like:

• Namecheap
• Google Domains
• GoDaddy

Once purchased, you’ll get access to your DNS settings.

Step 2: Create a Cloudflare Account & Add Your Domain

1. Go to Cloudflare Dashboard and create a free account.
2. Click “Add a Site” and enter your domain name (e.g., yourdomain.com).
3. Cloudflare will do a quick DNS scan—review and click Continue.
4. Choose the Free Plan and proceed.

Step 3: Change Your Domain’s Nameservers to Cloudflare

1. Cloudflare will show you two nameservers (e.g., chloe.ns.cloudflare.com, rick.ns.cloudflare.com).
2. Login to your domain provider account.
3. Find the DNS settings or Nameservers section.
4. Choose Custom Nameservers and replace the default ones with Cloudflare’s nameservers.
5. Save changes.

It might take a few minutes for the change to propagate.

Step 4: Add Your Domain in Vercel

1. Go to your Vercel Dashboard.
2. Navigate to your project → Settings → Domains.
3. Click “Add Domain”, and enter your domain (e.g., yourdomain.com).
4. Choose the Recommended (WWW & non-WWW) configuration.
5. Vercel will now show you two DNS records to configure in Cloudflare:
   • A Root A Record (typically @)
   • A CNAME Record (typically www)

Step 5: Configure DNS in Cloudflare

1. Go back to your Cloudflare Dashboard → DNS Settings for your domain.
2. Add the DNS records provided by Vercel:
   • Type: A, Name: @, Content: (Vercel IP)
   • Type: CNAME, Name: www, Content: cname.vercel-dns.com
3. Important: Make sure the Proxy status is OFF.
4. Click Save.
5. Once Vercel is generated the SSL, come back to the cloudflare dashboard, edit the DNS record and turn on the Proxy status.

What is a Proxy in Cloudflare?

Cloudflare lets you choose whether to proxy your traffic or just manage DNS records:

• Proxy ON: Cloudflare routes traffic through its network. You get benefits like caching, IP masking, firewall protection, and SSL.
• Proxy OFF: Traffic goes directly to your host (e.g., Vercel), and Cloudflare only manages DNS.

For connecting a domain to Vercel, you must turn OFF the proxy (DNS Only), so Vercel can properly verify and handle requests.

🎉 Done!

That’s it! You’ve successfully:

• Purchased a domain
• Configured Cloudflare DNS
• Connected your domain to your Vercel project

It may take a few minutes for the DNS to propagate. Once done, visiting yourdomain.com should show your live Vercel-hosted site.

Bonus Tips

• Enable HTTPS in Cloudflare's SSL/TLS settings for a secure connection.
• Use Page Rules for redirecting www to non-www or vice versa.
• Add Analytics via Vercel or third-party tools like Plausible or Cloudflare Analytics.

Final Thoughts

Connecting a custom domain to Vercel through Cloudflare gives you better DNS control, security, and performance. If you found this guide helpful, consider sharing it with fellow developers or bookmarking it for future projects!

Have Questions or Suggestions?

Drop a comment or reach out on [email protected] — I’d love to help or hear your thoughts.
Social Links:
Youtube | GitHub | LinkedIn

Thank you, Muhib.