How do I use a Cloudflare domain with Vercel?

If your domain is using Cloudflare's Nameservers and you plan to use it as a custom domains on your project, you may need some minor steps to ensure the domain will work correctly.

Without Proxy (DNS only)

In this method, you need to insert a CNAME record with the value cname.vercel-dns.com. Alternatively, you can use the A record 76.76.21.21. The cloud image should be grayed out with the "Proxy status" set to "DNS only".

Following the instructions above will guarantee the speed and reliability of your domain since the DNS resolution will go directly to Vercel without an intermediary.

With Proxy

A Cloudflare proxy works as an intermediary between your domain and Vercel, which is the hosting provider.

To configure a Cloudflare-proxied domain on Vercel, you need to follow these steps:

• Insert a CNAME record with the value cname.vercel-dns.com (recommended) or an A record with the value 76.76.21.21.
• Go to SSL/TLS and then Overview in the Cloudflare dashboard, and enable Full to ensure the traffic is always encrypted between Cloudflare and Vercel. You can check the Cloudflare documentation for more information about Encryption modes.

Cloudflare Access

If you're using Cloudflare Access, this will force all website requests via the Access service, resulting in Vercel's domain verification checks failing. To fix this, you must whitelist the following path in your Cloudflare Access settings: http://<YOUR_DOMAIN>/.well-known/acme-challenge/*

Summary

Following the steps above should result in a fully functional website.

If you are an advanced Cloudflare user and you are customizing Cloudflare's cache behavior, then it is recommended that you only use the Cloudflare CDN on a Vercel deployment for immutable assets, such as images and CSS/JS files.

If the application's pages are cached, it can introduce breakage due to the following behavior: when new deployments are created, the Vercel platform is unable to purge the content cached on Cloudflare. If your visitors load a cached /index.html requiring /static/script-abc.js, but this file is missing both in the new deployment and the Cloudflare CDN, then the website will fail to load the required JS asset and not work properly. Therefore, turning off the Cloudflare CDN for pages is recommended to avoid any unexpected problems.

For more information about the complications of using the Cloudflare CDN and proxy service, please see our generic proxy support article.