ERR_TOO_MANY_REDIRECTS with Next.js on Vercel and Custom Domain on Cloudflare

Question

I'm experiencing an issue with setting up my Next.js project hosted on Vercel with a custom domain managed through Cloudflare. Despite configuring the DNS and SSL settings correctly, I keep running into a net::ERR_TOO_MANY_REDIRECTS error when I try to access my site at www.example.io.

Here's what my setup looks like:

• Domain: www.example.io
• Hosting: Vercel
• DNS: Cloudflare

I have created a CNAME record in Cloudflare's DNS settings like this:

• Type: CNAME
• Name: www
• Content: cname.vercel-dns.com
• Proxy status: DNS only
• TTL: Auto

Additionally, I've set Cloudflare's SSL/TLS encryption mode to "Full".

Has anyone encountered this issue before, and can you suggest any solutions or further troubleshooting steps I can take?

Thank you in advance for your help!

Answer 1

I also just had this issue. Turns out Vercel provides documentation about how to fix it for Cloudflare.

The solution for me was exactly as in this article, which is to enable "SSL/TLS Strict" Option, instead of just "Full":

https://vercel.com/guides/resolve-err-too-many-redirects-when-using-cloudflare-proxy-with-vercel

I also turned off page redirects in Cloudflare, as I already handle this in Vercel.

Additionally, Vercel has documentation on how to integrate with Cloudflare, which was also helpful in resolving this problem.