For most Next.js sites, Vercel is the easier host: every framework feature works out of the box, and preview deployments come with each pull request. Cloudflare is the better fit when your domain, DNS and security settings already live there, or you want one network for several sites, but running full Next.js on it needs an adapter and more testing. A fully static Next.js export runs well on either.
I deploy Next.js and React sites to both, as part of my Next.js and React websites service. This portfolio sits behind Cloudflare, which serves it at the edge so the first byte is quick wherever the visitor is. I also move a lot of client domains through Cloudflare during hosting migrations. Here is how I choose.
What is the difference between Vercel and Cloudflare for Next.js?
Vercel is built by the same company as Next.js, so new framework features are designed to run there first. Cloudflare is a global network that also offers DNS, a CDN, security tools and a serverless runtime called Workers. Next.js runs on Workers through an open-source adapter.
| Factor | Vercel | Cloudflare |
|---|---|---|
| Setup for Next.js | Connect the repo and deploy, no configuration | Add an adapter, configure the build, then deploy |
| Framework features | Everything works on day one | Most features work through the adapter. Check the ones you rely on |
| Preview deployments | A preview URL for every branch and pull request | Preview URLs are available, with more setup |
| DNS, CDN and security | Available, but not its main focus | Its core business: DNS, caching, firewall and bot protection in one dashboard |
| Best for | Teams that want zero hosting work | Teams already running domains and other sites on Cloudflare |
| Static export | Supported | Supported, with no adapter needed |
I have left pricing out on purpose. Both change their plans often, and the right answer depends on your traffic. Compare the current plans against your own numbers before you decide.
When should you deploy on Vercel?
When you want hosting to be invisible. For a marketing site where the team ships campaign pages every week, Vercel's defaults remove a whole category of work:
- Image optimisation, server rendering and incremental regeneration work without any setup.
- Each pull request gets its own preview URL, so marketing can review a page before it merges.
- Rollbacks are a click.
The trade-off is that you add another vendor to the stack. If your DNS and security rules live somewhere else, you manage two dashboards.
When should you deploy on Cloudflare?
When Cloudflare already runs the rest of your web presence. Many of the client sites I migrate end up with DNS on Cloudflare, because it gives one place for DNS records, caching and firewall rules. If the Next.js site joins that account, the domain, the certificate and the security settings stay in one place.
It also suits sites that are mostly static. A Next.js site exported as static files runs on Cloudflare's static hosting with no adapter at all, which is the simplest setup there is. Server rendering, middleware and on-demand image resizing are where you need the adapter and where testing matters.
Before I commit a server-rendered site to Cloudflare, I deploy it to a test URL and walk through the features it actually uses:
- Rendering. Server-rendered and regenerated pages return complete HTML, checked with View Source rather than the browser's inspector.
- Images. Optimised images load at the right sizes, or the site uses a separate image service.
- Middleware and redirects. Every redirect and rewrite behaves the same as it does locally.
- Forms and APIs. Route handlers that post to a CRM or send email work with production-style environment variables.
If any of those needs a workaround, I weigh the workaround against simply hosting on Vercel.
How do I decide for a client?
The last branch is common. Keeping DNS on Cloudflare and hosting on Vercel is a well-trodden setup, and it lets each platform do what it is best at.
What should you check before launch day?
The host matters less than the launch itself. These are the steps I run on every Next.js deployment, whichever platform it lands on.
- 1
Block indexing of previews
Send a noindex header or meta tag on every non-production deployment. An indexed preview can compete with the live site in search.
- 2
Copy every DNS record first
Before changing nameservers, recreate all records at the new provider, especially MX, SPF, DKIM and DMARC, so email keeps flowing.
- 3
Set environment variables per environment
Production keys in production only. Previews get test keys for payments, forms and analytics.
- 4
Redirect the old URLs
Every old URL returns one 301 to its new home. Test the list, not a sample.
- 5
Check from several regions
After the cutover, confirm the domain resolves to the new host from more than one location before you call it done.
I learned the email step the careful way on client migrations. On one client store, the site moved to new hosting and the GoDaddy DNS was repointed while Microsoft 365 mail stayed intact, because every mail record was in place before the switch. My guide to moving a WordPress site without downtime covers the same DNS method in more detail, and it applies to Next.js sites too.
Does the host affect SEO?
Only through speed and uptime, and both platforms are strong on both. What affects SEO far more is what you deploy: server-rendered HTML, a unique title and canonical per page, structured data, a sitemap and real 404s. My technical SEO checklist for Next.js covers that layer.
Do not let the host decide your framework
Choose Next.js because it suits the site, then choose the host. If you want Cloudflare and do not want an adapter, a static export or a different framework may serve you better than fighting the setup.
Which would I pick today?
For a Next.js marketing site where the team wants zero hosting work: Vercel, with DNS wherever it already lives. For a mostly static site, or a business whose domains and security already run on Cloudflare: Cloudflare, after testing every feature the site uses. If you want a second opinion on the whole stack, the free Tech Stack Advisor recommends one layer by layer, including hosting, with the trade-offs.
