Deploy Your React or Next.js App on Vercel

What is Vercel?

Vercel is a cloud platform that lets you upload your web app (like React or Next.js) and instantly make it live online — with:

• ✅ Free hosting
• 🌐 HTTPS (SSL) support
• 🔁 Automatic deployment from GitHub
• ⚡ Global speed (via CDN)

🧰 What You Need Before Hosting with Vercel

✅ Step-by-Step Guide to Hosting

🔹 Step 1: Create Your React or Next.js Project

For React:

1npx create-react-app my-react-app
2cd my-react-app
3npm start

For Next.js:

1npx create-next-app my-next-app
2cd my-next-app
3npm run dev

This will launch your site on http://localhost:3000. Make sure it's working ✅

🔹 Step 2: Push Your Code to GitHub

If you haven’t already:

1git init
2git add .
3git commit -m "Initial commit"

Create a repo on GitHub → Copy the URL → then:

1git remote add origin https://github.com/yourusername/your-repo.git
2git push -u origin main

Now your project lives on GitHub.

🔹 Step 3: Deploy to Vercel

1. Go to https://vercel.com
2. Sign in with your GitHub account
3. Click “New Project”
4. Select the repo you just pushed
5. Vercel will auto-detect the project type:
   • For React: create-react-app
   • For Next.js: Next.js
6. Leave settings as default and click “Deploy”

🎉 Done! Your site will be live in less than a minute on:

1https://your-project-name.vercel.app

📦 What Happens After Deployment?

• Every time you push new code to GitHub, Vercel auto-deploys the latest version.
• You can preview every branch or pull request.

Your site is served through a fast global CDN, so it loads quickly anywhere.

🧪 Common Beginner Errors (and Fixes)

🌐 Using a Custom Domain with Vercel — Full Guide (2025)

🧾 Do You Need to Pay for a Custom Domain?

Yes, you must purchase a custom domain (e.g., mycoolsite.com) from a domain registrar. These typically cost between $10–$20/year, depending on the name and extension.

🛒 Popular Registrars to Buy a Domain:

• GoDaddy
• Namecheap
• Google Domains (Now Squarespace Domains)
• Cloudflare
• Porkbun

Important: Vercel does not charge anything to connect the domain. You only pay the registrar for the domain itself.

🔧 After You Own a Domain: Connect It to Vercel

🪜 Step-by-Step to Add a Custom Domain to Your Project

✅ Step 1: Go to Vercel Dashboard

• Log into https://vercel.com
• Go to your project dashboard

✅ Step 2: Open the "Domains" Settings

• Click on your project name
• Go to Settings → Domains
• Click “Add” and type your domain (e.g., mycoolsite.com)

✅ Step 3: Verify Domain Ownership

You’ll now see instructions from Vercel to verify you own the domain.

This involves changing your DNS records at your registrar (GoDaddy, etc.):

Option 1: Update Nameservers (Recommended)

1. Go to your domain registrar (e.g., GoDaddy)
2. Find DNS or Name Server settings
3. Replace the current nameservers with Vercel’s:

1ns1.vercel-dns.com  
2ns2.vercel-dns.com

4. Save the changes. Propagation may take a few minutes to a few hours.

Option 2: Add a CNAME or A Record (Advanced)

If you don’t want to change nameservers, you can manually add a record:

• A Record (for root domain mycoolsite.com)
  Point to: 76.76.21.21
• CNAME Record (for www.mycoolsite.com)
  Point to: cname.vercel-dns.com

⚠️ Make sure there are no conflicting DNS records, or it might not work.

✅ Step 4: Wait for DNS Propagation

After updating DNS:

• Vercel will auto-detect the changes
• Your domain will show as "verified"
• SSL (HTTPS) will be added automatically and free via Let's Encrypt

⏱️ This process usually takes 5–30 minutes, but can take up to 48 hours depending on your DNS provider.

🟢 Step 5: Set as Primary Domain (Optional but Recommended)

Once verified:

• In the Domains tab, you can mark your domain as Primary
• Now https://mycoolsite.com is your main address, and the .vercel.app version will redirect to it.

💡 Tips & Best Practices

• ✅ Always redirect www to non-www or vice versa (Vercel can handle this automatically)
• ✅ Use Cloudflare DNS for fast propagation and security
• ❌ Don’t mix multiple host providers or CDN setups unless you know what you're doing
• 📌 Make sure to renew your domain yearly or enable auto-renew

🔐 Is HTTPS Included?

Yes — once your domain is connected and verified, Vercel provides free HTTPS (SSL) automatically via Let’s Encrypt. No configuration needed.

🧪 Example: Connecting a GoDaddy Domain to Vercel

Let’s say you bought mycoolsite.com on GoDaddy. Here's how to connect it to Vercel:

🔹 Step 1: Go to GoDaddy

1. Log in at https://godaddy.com
2. Click “My Products”
3. Find your domain (e.g., mycoolsite.com) → Click DNS

🔹 Step 2: Update DNS Records

Scroll to the Nameservers section and click "Change"

• Select Custom
• Enter:

1ns1.vercel-dns.com  
2ns2.vercel-dns.com

Click Save.

🔹 Step 3: Add Domain to Vercel

1. Go to https://vercel.com → Your Project → Settings → Domains
2. Click “Add” and enter your domain: mycoolsite.com

🔹 Step 4: Done!

Wait 5–30 minutes (or up to 24 hours). Once DNS updates, your site will go live at:

1https://mycoolsite.com

✅ Vercel will automatically add free HTTPS via Let's Encrypt.