Deploy Your First React or Next.js App to Vercel for Free (Zero Config Guide)

The 40-Word Deployment Summary

To deploy your React or Next.js app to Vercel for free, push your code to a GitHub repository, visit Vercel.com, log in with GitHub, click “Add New Project”, select your repository, and click “Deploy”. Vercel automatically builds and hosts your app with free global SSL.

Why Vercel is the Standard for Modern Web Apps

In the past, deploying a web application required setting up an Ubuntu Linux server, configuring Nginx, obtaining SSL certificates via Let’s Encrypt, and debugging reverse proxies. Vercel eliminates all server maintenance through automated serverless edge hosting:

• 100% Free Hobby Tier: Unlimited personal projects with 100 GB bandwidth per month and generous serverless function execution.
• Zero Configuration: Automatically recognizes Next.js, Vite, Create React App, Nuxt, Svelte, and Astro.
• Automated CI/CD: Every time you run git push to your repository, Vercel triggers a new build and updates your live site in under 60 seconds.
• Instant Preview Branches: Every Pull Request receives a dedicated live preview URL to test changes before merging.

Step-by-Step Deployment Walkthrough

Step 1: Test Your Production Build Locally

Before deploying to the cloud, ensure your application builds cleanly without TypeScript or bundler errors. Open your terminal in your project root and run:

npm run build

If your build completes with a green success message (e.g. ✓ Compiled successfully), your project is ready. If you see ESLint or syntax errors, fix them locally first.

Step 2: Push Your Project to GitHub

Make sure your latest code is pushed to your GitHub repository:

git add .
git commit -m "feat: ready for initial vercel deployment"
git push origin main

Step 3: Connect Vercel to Your GitHub Account

1. Navigate to vercel.com/signup and click “Continue with GitHub”.
2. Authorize Vercel to access your GitHub repositories (you can choose to grant access to all repositories or only select ones).
3. On your Vercel Dashboard, click the blue “Add New…” button and select “Project”.

Step 4: Import and Configure Your Project

1. Under “Import Git Repository”, find your project and click “Import”.
2. Vercel will inspect your code and automatically populate:
   • Framework Preset: (e.g., Next.js or Vite).
   • Root Directory: ./
   • Build Command: npm run build
   • Output Directory: .next or dist
3. Environment Variables (Optional): If your app connects to a database (like Supabase or MongoDB) or uses an API key, expand the Environment Variables accordion and paste your keys.
4. Click “Deploy”.

Step 5: Access Your Live Production URL

Within 30 to 60 seconds, Vercel will present you with an animated congratulations screen showing a preview thumbnail and your live URL:

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

Your site is now live globally, protected by automatic HTTPS, and hosted across Vercel’s global edge network.

Adding a Custom Domain (100% Free)

If you claimed a free .me or .tech domain through the GitHub Student Developer Pack, you can attach it to Vercel in 2 minutes:

1. Go to your project in Vercel > Settings > Domains.
2. Type your custom domain (e.g. yourname.me) and click Add.
3. Vercel will display the DNS records you need (a CNAME pointing to cname.vercel-dns.com or an A Record pointing to 76.76.21.21).
4. Paste these records into your domain registrar (Namecheap or Cloudflare), and Vercel will automatically provision an SSL certificate.

Common Deployment Issues & How to Fix Them

Issue 1: Build fails with “Command failed: npm run build”

Check the build logs in Vercel. 90% of the time, this is caused by an unused variable or missing dependency in your package.json. Run npm run build locally to see the exact line number.

Issue 2: “Environment variable not found” at runtime

In Next.js, any environment variable that needs to be accessed by the browser client must be prefixed with NEXT_PUBLIC_ (e.g. NEXT_PUBLIC_SUPABASE_URL). Standard variables without the prefix are only available server-side.