Workflow

Deploy a GitHub Repo to Vercel

Connect your GitHub repository to Vercel and get automatic deployments on every push. Full configuration including environment variables, domains, and build settings.

BeginnerVerceldeploymentCI/CDGitHub

Goal

Connect your GitHub repository to Vercel so that every push to main automatically deploys your website.

What you will build

A live deployment pipeline:

  • GitHub repo → Vercel project → live URL
  • Automatic deploys on every push
  • Preview deployments for every pull request

Why it matters

Manual deployment is error-prone and slow. A continuous deployment pipeline means you spend your time building, not deploying. Push your code — the pipeline does the rest.

Vercel as a build robot

You write and push code. Vercel is a robot that watches your repository. When it sees a new commit on main, it runs npm install and npm run build, takes the output, and distributes it to servers worldwide. The entire process takes about 30 seconds. You do nothing.

Tools needed

  • GitHub account with a Next.js project in a repository
  • Vercel account (sign up at vercel.com — use "Continue with GitHub")

Step-by-step workflow

Import your GitHub repo into Vercel

  1. Go to vercel.com/new
  2. Click "Import Git Repository"
  3. Select your GitHub account and find your repo
  4. Click Import

Configure the project

Vercel automatically detects Next.js and sets the correct defaults.

Check the settings:

  • Framework Preset: Next.js (auto-detected)
  • Root Directory: . (your repo root, unless your project is in a subfolder)
  • Build Command: npm run build (default, correct for most projects)
  • Output Directory: .next (default, correct)

If your project is in a subfolder (e.g., cogninoidlabs-web/), set Root Directory to that subfolder.

Add environment variables

If your project uses any .env variables, add them now. Go to Environment Variables and add each one.

Common variables for Next.js projects:

  • NEXT_PUBLIC_API_URL — public API endpoint
  • DATABASE_URL — database connection string
  • Any API keys your project uses

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. All others are server-only.

Click Deploy

Click Deploy. Vercel runs npm install and npm run build. Watch the build log.

If the build fails, read the error in the log. It is usually one of:

  • A TypeScript error that only appears in strict mode
  • A missing environment variable
  • A dependency that is installed globally on your machine but not in package.json

Verify the deployment

Vercel gives you a URL like your-project.vercel.app. Open it. Does it match what you see locally?

Check:

  • Does the homepage load?
  • Do all routes work?
  • Are images showing?
  • Does the browser console show any errors?

Test automatic deployment

Make a small visible change locally. Update one line of text. Push to GitHub:

git add .
git commit -m "Test automatic deployment"
git push

Go to your Vercel project dashboard. You should see a new deployment starting. Within 30 seconds, your live URL should show the change.

How to Verify It Works
  • Vercel project dashboard shows your repository connected
  • First deployment succeeded (green checkmark)
  • Live URL opens your website
  • Pushing a commit triggers a new deployment automatically
  • Build log shows no errors or warnings
Common Mistakes
  • Build passes locally but fails on Vercel — run npm run build locally first. Production builds are strict about TypeScript errors
  • Environment variables missing — check every .env variable is added in Vercel settings
  • Wrong root directory — if your package.json is in a subdirectory, set Root Directory in Vercel settings
  • node_modules in the repo — this slows builds and causes cache issues. Make sure .gitignore excludes it

Next Steps

Connect a domain to Vercel

Use your custom domain

Add Google Search Console and sitemap

Make your site findable on Google

Previous workflowNext workflow