DEV Community

Cover image for How to Host React/Next.js on Vercel (Free, 3 Minutes)
xiaoguang_
xiaoguang_

Posted on

How to Host React/Next.js on Vercel (Free, 3 Minutes)

Deploying used to be a pain. Vercel isn't.
Push your code, click a button, get a live link. Here's the whole thing.

You need: a GitHub account, your project pushed to GitHub, a Vercel account.

1. Push to GitHub

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Already on GitHub? Skip this.

2. Sign up on Vercel

Go to vercel.comContinue with GitHub.

image

3. Import your project

Add New → Project → pick your repo → Import.

Vercel detects React or Next.js on its own. No config needed.

image

4. Deploy

Click Deploy. Wait about a minute.

You get a live link: your-project.vercel.app

Done. Your app is online.

image

5. (Optional) Custom domain

Domains tab → add your domain → update DNS at your provider. Vercel tells you exactly what to add. It can take a few hours to propagate.

image

6. (Optional) API keys or a database?

Settings → Environment Variables — add them there, not in your code.

⚠️ Anything starting with NEXT_PUBLIC_ is public. Never put secrets there.

The best part: every git push to main redeploys automatically. Push to any other branch, and you'll get a preview deployment to test before going live.

That's it. No servers, no config files.

Read on my site: https://kimkorngmao.com/notes/how-to-host-react-next-js-on-vercel-free-3-minutes

Top comments (0)