How to Deploy a Next.js Website on Vercel

Deploying a website used to mean wrestling with servers, configuring nginx, managing SSL certificates, and dealing with hosting bills. Vercel changed all of that. Built by the same team that created Next.js, Vercel is a cloud platform designed specifically for frontend and full-stack web applications — and for Next.js projects in particular, the deployment experience is as close to magic as web development gets. In this guide, you will go from zero to a live, production-ready Next.js website, completely free, with automatic deployments every time you push code to GitHub.

Why Vercel for Next.js?

Vercel was founded by Guillermo Rauch, who also created Next.js. This means the platform is not just compatible with Next.js — it is built around it. Features that require significant server configuration on other hosting platforms work automatically on Vercel: server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), API routes, edge functions, image optimization, and middleware all work out of the box with zero configuration.

For a student, developer building a portfolio, or team launching an MVP, Vercel's free Hobby plan provides everything needed to run a production-quality website. You do not need a credit card to sign up, and the free tier does not expire after a trial period.

Prerequisites and What You Need

Before you start, make sure you have the following in place. Don't skip this section — each item is genuinely required to follow the steps below.

• A computer running Windows, macOS, or Linux
• A stable internet connection
• Node.js version 18 or higher installed (we cover this in Step 1)
• A free GitHub account — sign up at github.com if you do not have one
• A free Vercel account — sign up at vercel.com using your GitHub account
• Basic familiarity with the command line / terminal — you will be running a handful of commands
• A text editor — VS Code is recommended and free at code.visualstudio.com

Step 1: Install Node.js and npm

Node.js is the JavaScript runtime that powers Next.js development. npm (Node Package Manager) is included with Node.js and is used to install packages and run project scripts. You need both installed before you can create or run a Next.js project.

node -v

npm -v

# macOS with Homebrew
brew install node

# Ubuntu / Debian Linux
sudo apt update
sudo apt install nodejs npm

# Windows with winget
winget install OpenJS.NodeJS.LTS

Step 2: Create a Next.js Project

Next.js provides an official scaffolding tool called create-next-app that sets up a complete, production-ready project structure in seconds. You do not need to install it separately — npx (included with npm) downloads and runs it automatically.

npx create-next-app@latest my-website

Would you like to use TypeScript? ⬺ No (or Yes if you know TypeScript)
Would you like to use ESLint? ⬺ Yes
Would you like to use Tailwind CSS? ⬺ Yes (optional, but very useful)
Would you like to use the `src/` directory? ⬺ No
Would you like to use App Router? ⬺ Yes (recommended)
Would you like to customize the default import alias? ⬺ No

cd my-website
npm run dev

Step 3: Explore Your Project Structure

Before pushing to GitHub, take a few minutes to understand what create-next-app generated. Knowing your project structure makes it much easier to customize your site and debug problems later.

Step 4: Push Your Project to GitHub

Vercel deploys from Git repositories. GitHub is the most popular option and integrates most smoothly with Vercel. You need to create a GitHub repository for your project and push your code to it before Vercel can deploy it.

# Initialize a Git repository (if not already initialized)
git init

# Stage all files for the first commit
git add .

# Create your first commit
git commit -m "Initial commit"

# Rename the default branch to 'main'
git branch -M main

# Connect your local repo to the GitHub repo
git remote add origin https://github.com/yourusername/my-website.git

# Push your code to GitHub
git push -u origin main

Step 5: Deploy on Vercel

With your code on GitHub, deploying to Vercel takes under two minutes. The platform detects Next.js automatically and configures the build and deployment settings without any input from you.

Step 6: Set Up Environment Variables

Most real-world Next.js applications use environment variables to store sensitive configuration — API keys, database connection strings, authentication secrets, and third-party service credentials. You define these in a .env.local file when developing locally, but for your Vercel deployment you add them through the dashboard, where they are stored securely and injected into your build and runtime environment.

// In an API route or Server Component
const dbUrl = process.env.DATABASE_URL;
const apiKey = process.env.OPENAI_API_KEY;

# .env.local
NEXT_PUBLIC_GOOGLE_MAPS_KEY=your-maps-api-key-here

// In client-side code
const mapsKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY;

Step 7: Automatic Updates with Git Push

One of Vercel's most powerful features is its automatic CI/CD pipeline. Every time you push code to your GitHub repository's main branch, Vercel automatically runs a new build and deploys the updated version. No manual steps required — your live site updates within about a minute of your push.

# Stage all changed files
git add .

# Commit with a descriptive message
git commit -m "Add contact page and update homepage hero"

# Push to GitHub (triggers Vercel deployment automatically)
git push

Rolling back a bad deployment

If a deployment introduces a bug or breaks your site, Vercel makes it easy to instantly roll back to a previous working version. In your Vercel dashboard, go to the Deployments tab, find the last working deployment, click the three-dot menu next to it, and select Promote to Production. Your site reverts to that version in seconds — no code changes required.

Step 8: Add a Custom Domain

The default .vercel.app URL works perfectly for development and portfolio projects, but for a professional website you will want a custom domain like yourname.com or yourstartup.co.ke. Vercel supports custom domains on the free Hobby plan, and the setup process is straightforward.

Step 9: Preview Deployments and Branching

One of the features that makes Vercel exceptional for professional development workflows is preview deployments. Every time you push to any branch other than main, Vercel automatically builds and deploys that branch to a unique temporary URL. This lets you test changes in a real production environment before merging them into your main site — without affecting what visitors see on your live production URL.

# Create and switch to a new branch
git checkout -b feature/new-homepage

# Make your changes, then push
git add .
git commit -m "Redesign homepage hero section"
git push -u origin feature/new-homepage

Navigating the Vercel Dashboard

The Vercel dashboard is your control center for all deployed projects. Understanding its key sections helps you monitor, configure, and troubleshoot your deployments efficiently.

Optimizing Your Next.js App for Production

Getting your site live is the first milestone. Making it fast and production-ready is the next. Next.js and Vercel together offer powerful optimization tools — here are the most impactful ones to implement before sharing your site with the world.

Image Optimization

Use Next.js's built-in Image component instead of regular HTML <img> tags. It automatically optimizes images — resizing, converting to modern formats (WebP, AVIF), and lazy-loading them. On Vercel, image optimization runs serverlessly with no configuration required.

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero-photo.jpg"
      alt="Hero image"
      width={1200}
      height={630}
      priority   // load above-the-fold images eagerly
    />
  );
}

Metadata and SEO

Next.js App Router provides a structured way to define page metadata for SEO. Add a metadata export to any page:

// app/page.tsx
export const metadata = {
  title: 'My Website — Home',
  description: 'Welcome to my personal portfolio and blog.',
  openGraph: {
    title: 'My Website',
    description: 'Personal portfolio built with Next.js and deployed on Vercel',
    url: 'https://mywebsite.com',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
};

Static vs Server Rendering

Next.js App Router defaults to static rendering (pre-built at deploy time) for maximum performance. Pages that need real-time data use dynamic rendering. Choose the right approach for each page: use static rendering for pages whose content does not change frequently (home page, about page, blog posts), and server rendering or client-side data fetching for pages showing live data (dashboards, user profiles).

Understanding Vercel's Free Tier Limits

Vercel's Hobby (free) plan is genuinely generous for personal projects, portfolios, and small applications. However, it does have limits that you should be aware of so you are not surprised if your project exceeds them.

Alternatives to Vercel

Vercel is the best choice for most Next.js projects, but it is not the only option. Here is how it compares to the main alternatives.

Troubleshooting Common Problems

Frequently Asked Questions

Do I need to know React to use Next.js?

Next.js is built on top of React, so a basic understanding of React components, props, and state is very helpful. However, for simple websites (a portfolio, a blog, a landing page), you can get a long way with just HTML, CSS, and basic JavaScript inside Next.js's file-based routing system. If you are completely new to React, completing a React tutorial first (the official React docs at react.dev are excellent) will make your Next.js experience much smoother.

Is Vercel truly free? Will I be billed unexpectedly?

Vercel's Hobby plan is free and does not require a credit card to sign up. You'll not be billed unless you explicitly upgrade to a paid plan. However, the Hobby plan has usage limits (100GB bandwidth, 6,000 build minutes per month) — if you exceed these, Vercel will restrict your deployments rather than charge you. For the vast majority of personal projects, portfolios, and student projects, these limits are never approached.

Can I deploy a Next.js app with a database on Vercel?

Yes — and it works very well. Vercel has native integrations with several databases including Vercel Postgres (powered by Neon), Vercel KV (Redis), Vercel Blob (file storage), PlanetScale, Supabase, and MongoDB Atlas. You can also connect to any external database by adding the connection string as an environment variable. For serverless deployments, use a database that supports connection pooling (like Neon or PlanetScale) to avoid exhausting connection limits.

What happens if my Next.js site gets a lot of traffic?

Vercel's infrastructure auto-scales. Your site will not go down from a traffic spike — Vercel spins up additional serverless function instances automatically. On the Hobby plan, the 100GB monthly bandwidth limit is the primary constraint. If you genuinely expect high traffic, upgrading to the Pro plan gives you 1TB of bandwidth and removes the commercial use restriction.

Can I deploy a Next.js app to Vercel without using GitHub?

Yes — Vercel also supports GitLab and Bitbucket repositories. You can also deploy directly from the command line using the Vercel CLI: install it with npm install -g vercel, then run vercel inside your project folder and follow the prompts. This is useful for quick deployments without setting up a Git repository, though the Git-based workflow is recommended for production projects because it gives you automatic deployments and a full deployment history.