Beginners: Domains & Launching Your Website

So you've built something — maybe a portfolio, a Next.js app, or a side project — and now you want to put it on the internet with a real domain name. You've heard good things about Cloudflare for domains and Vercel for hosting, and you want to put them together.

Good news: it's not complicated. But if you've never touched DNS records before, the whole process can feel like staring at a control panel in a language you don't speak.

This guide will walk you through every step, from purchasing your domain on Cloudflare to getting it live on Vercel. No assumptions, no skipped steps.

Why Cloudflare + Vercel?

Before we dive in, a quick note on why this combination is popular:

• Cloudflare Registrar sells domains at cost — no markup, no surprise renewal fees. You pay what Cloudflare pays the registry.
• Vercel offers an exceptional hosting platform for frontend frameworks (Next.js, Astro, SvelteKit, etc.) with automatic deployments from Git.
• Together, you get a fast, secure, and affordable stack without needing to manage servers.

Step 1: Register Your Domain on Cloudflare

If you don't have a Cloudflare account yet, head to cloudflare.com and sign up. It's free.

Search for your domain

1. Log in to the Cloudflare dashboard.
2. In the left sidebar, click Domain Registration → Register Domains.
3. Type in the domain name you want (e.g., myproject.com) and hit search.
4. Cloudflare will show you available TLDs (.com, .dev, .ca, etc.) along with their prices.

Purchase the domain

1. Select the domain you want and click Purchase.
2. Fill in your registrant contact information. Cloudflare offers free WHOIS privacy by default — your personal details won't be publicly visible.
3. Choose your registration period (1–10 years).
4. Add a payment method and complete the purchase.

Once the purchase goes through, your domain will appear in your Cloudflare dashboard under Websites. Cloudflare automatically sets itself up as the DNS provider for domains registered through their registrar — there's no need to change nameservers. That part is already done for you.

Step 2: Deploy Your Project on Vercel

If you haven't already deployed your project to Vercel, here's the quick version:

1. Push your project to a Git repository (GitHub, GitLab, or Bitbucket).
2. Log in to vercel.com and click Add New Project.
3. Import your repository.
4. Vercel will auto-detect your framework and configure the build settings.
5. Click Deploy.

Within a minute or two, your project will be live at a .vercel.app URL (something like myproject.vercel.app). You can verify everything works before connecting your custom domain.

Step 3: Add Your Custom Domain in Vercel

This is where things come together.

1. In your Vercel dashboard, open your project.
2. Go to Settings → Domains.
3. Type in your domain name (e.g., myproject.com) and click Add.

Vercel gives you the DNS instructions

Here's the key part that trips people up: Vercel will tell you exactly what DNS records to create. You don't have to guess.

After adding your domain, Vercel will display a configuration screen showing the records you need. Typically, it looks something like this:

Type	Name	Value
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

What do these mean?

• The A record points your root domain (myproject.com) to Vercel's servers.
• The CNAME record points the www subdomain (www.myproject.com) to Vercel so that both versions of your URL work.

Vercel may also show alternative configurations depending on whether you want www to be the primary domain or the root. Pay attention to which setup Vercel recommends — it'll be highlighted on screen.

Keep this tab open. You'll need these values in the next step.

Step 4: Configure DNS Records in Cloudflare

Now switch over to your Cloudflare dashboard.

1. Click on your domain under Websites.
2. In the left sidebar, click DNS → Records.

You'll see the DNS management panel. By default, there might be a few records already there (like some Cloudflare parking records). You can delete any placeholder records that aren't needed.

Add the A record

1. Click Add Record.
2. Set the Type to A.
3. Set the Name to @ (this represents your root domain).
4. Set the IPv4 address to the IP Vercel gave you (e.g., 76.76.21.21).
5. Important: Set the Proxy status — click the orange cloud icon to toggle it to DNS only (grey cloud). More on this below.
6. Click Save.

Add the CNAME record

1. Click Add Record again.
2. Set the Type to CNAME.
3. Set the Name to www.
4. Set the Target to the value Vercel gave you (e.g., cname.vercel-dns.com).
5. Again, set the Proxy status to DNS only (grey cloud).
6. Click Save.

About the proxy toggle (orange cloud vs grey cloud)

This is the one thing that catches most beginners off guard.

Cloudflare has a feature called Proxy mode (the orange cloud). When enabled, traffic routes through Cloudflare's network, which provides CDN caching, DDoS protection, and other features.

However, Vercel handles its own SSL certificates and edge network. If Cloudflare's proxy is enabled, it can conflict with Vercel's SSL provisioning and cause issues like redirect loops, SSL errors, or broken deployments.

The simplest and most reliable approach for beginners: set your records to DNS only (grey cloud). This lets Cloudflare handle DNS resolution while Vercel handles everything else.

If you're more experienced and want to use Cloudflare's proxy, you'll need to configure your SSL/TLS settings in Cloudflare to Full (Strict) mode. But if you're just getting started, grey cloud is the way to go.

Step 5: Verify the Connection in Vercel

Head back to your Vercel project's Settings → Domains page.

Vercel will automatically check whether your DNS records are configured correctly. You'll see one of three states:

• ✅ Valid Configuration — Everything is working. You're live.
• ⏳ Pending Verification — DNS changes haven't propagated yet. Give it a few minutes, sometimes up to an hour.
• ❌ Invalid Configuration — Something's wrong with the DNS records. Double-check the values and proxy settings.

DNS propagation is usually fast (under 5 minutes for new domains on Cloudflare), but it can occasionally take longer. Be patient.

Once Vercel shows a green checkmark, it will also automatically provision an SSL certificate for your domain. Your site will be accessible via https:// without any extra configuration.

Step 6: Test Everything

Open your browser and visit:

• https://myproject.com
• https://www.myproject.com

Both should load your site with a valid SSL certificate (look for the lock icon). Vercel typically handles redirecting one to the other based on your preferred domain setting.

If something isn't working, here's a quick troubleshooting checklist:

• Redirect loop or SSL error? Your Cloudflare proxy is probably on. Toggle the records to DNS only (grey cloud).
• Site not loading at all? DNS might still be propagating. Wait 15–30 minutes and try again. You can check propagation status at dnschecker.org.
• Only www works (or only the root)? Make sure both the A record and CNAME record are created and match what Vercel specified.
• Vercel shows "Invalid Configuration"? Re-read the DNS values Vercel provided carefully. A common mistake is putting www.myproject.com as the CNAME name instead of just www.

Recap

Here's the full flow, condensed:

1. Buy your domain on Cloudflare Registrar.
2. Deploy your project to Vercel from Git.
3. Add the domain in Vercel's project settings — Vercel tells you what DNS records to create.
4. Create those DNS records in Cloudflare, using DNS only mode (grey cloud).
5. Wait for verification in Vercel, and you're live.

That's it. Five steps, no server configuration, no manual SSL setup, and your domain renewals will be at cost.

Wrapping Up

Connecting a Cloudflare domain to Vercel is one of those tasks that sounds intimidating if you've never done it, but is genuinely straightforward once you understand the flow. The key insight is that Vercel does the hard work of telling you exactly what records to set up — your job is just to enter them in Cloudflare and make sure the proxy is toggled off.

If you're building a project and need help getting it from local development to production — whether that's deployment, DNS, or the application itself — feel free to reach out. I'm always happy to help fellow developers get unstuck.

Super Prompt

You are a senior Next.js, Vercel, and deployment engineer.

Your job is to help me take my existing project and get it successfully deployed to Vercel.

I want you to act like a hands-on deployment expert, not a teacher giving generic advice. Be practical, specific, and careful. Assume I am a solo builder and want the fastest reliable path to production.

Your responsibilities:
1. Audit my project setup for anything that could break a Vercel deployment.
2. Identify missing files, bad config, environment variable issues, build script issues, routing issues, API issues, and dependency/version problems.
3. Tell me exactly what to change, in order.
4. When relevant, provide full replacement code, not partial snippets.
5. Prefer production-safe solutions over hacks.
6. Keep solutions compatible with Vercel best practices.
7. If you suspect something, say what you suspect and how to verify it.
8. Do not give broad theory unless it directly helps fix deployment.

What I need from you:
- Review my project structure
- Check package.json scripts
- Check vercel.json if needed
- Check next.config.js / next.config.ts
- Check environment variable usage
- Check API routes / server actions / middleware
- Check image config, redirects, headers, and domain issues
- Check build output risks
- Check anything that commonly fails on Vercel but works locally

Important rules:
- Do not assume the app is correct just because it works on localhost
- Treat localhost success and Vercel success as different environments
- Be very strict about production readiness
- Flag anything that may fail only during CI/build/serverless execution
- If a command should be run, give me the exact command
- If a file should be edited, tell me the exact file
- If you need to rewrite a file, output the full file
- If multiple fixes are needed, prioritize them from most likely to least likely

Workflow:
Step 1: Ask me for the files and terminal errors you need first.
Step 2: Based on what I send, identify the most likely deployment blockers.
Step 3: Give me an exact fix plan in order.
Step 4: Help me verify each fix before moving on.
Step 5: Once fixed, give me the exact final deployment steps for Vercel.

Context:
- I want to deploy this project to Vercel
- I want minimal fluff
- I want production-safe answers
- I want you to think like a debugger and deployment engineer
- If there are hidden issues, proactively look for them

Start by asking me for:
1. package.json
2. next.config.js / next.config.ts
3. vercel.json if it exists
4. project folder structure
5. current Vercel build error log
6. any environment variables used
7. any API route or middleware files