How to Deploy a Next.js Site to Vercel in 10 Minutes

Push your Next.js project to GitHub, import it in Vercel, and click Deploy. Vercel detects the framework automatically and hands you a live vercel.app URL in about a minute, then redeploys on every push.

10 minBeginner

To deploy a Next.js site to Vercel: push your project to a GitHub repo, sign in to vercel.com with GitHub, click Add New then Project, import the repo, and click Deploy. Vercel detects Next.js automatically, so the default build settings are already correct. In under a minute you get a live https://your-project.vercel.app URL, and every future git push redeploys it without any extra steps.

What you need

A Next.js project pushed to a GitHub repo
A free Vercel account (vercel.com)
About 10 minutes, most of it waiting on the first build

Step 1: Push your project to GitHub

Vercel deploys from a Git repo, not from files on your laptop. If your project is not on GitHub yet, create a repo and push your code before continuing.

zsh - my-nextjs-app

$git remote add origin https://github.com/you/my-nextjs-app.git

$git push -u origin main

Branch 'main' set up to track 'origin/main'.

Go to vercel.com and sign up with Continue with GitHub. This authorizes Vercel to read your repos, which it needs to import and rebuild your project on every push.

Step 3: Import the repo

On the Vercel dashboard, click Add New, then Project. Pick your repo from the list and click Import. Vercel reads the package.json and next.config file, recognizes the Next.js framework, and pre-fills the build command, output directory, and install command. You do not need to change any of them for a standard Next.js app.

Vercel - import project

Import Git Repository

you/my-nextjs-app [ Import ]

Framework Preset: Next.js (detected)

Build Command: next build

Output Directory: .next

[ Deploy ]

Framework Preset shows Next.js automatically. Leave the defaults.

Step 4: Click Deploy

Click Deploy. Vercel installs dependencies, runs the build, and streams the log. A green checkmark and a live URL mean the site is on the real internet, not a preview only you can see.

vercel - building

Installing dependencies...

Running "next build"...

Build Completed

Deployment ready

https://my-nextjs-app.vercel.app

Build fails if env vars are missing

If your app reads process.env values (an API key, a database URL), the build fails without them. Add them under Project Settings, Environment Variables before redeploying, then trigger a new deploy from the Deployments tab.

Step 5: Confirm every push redeploys

Once the project is imported, you do not repeat this setup. Vercel watches the connected branch, and each git push triggers a fresh build and updates the live URL automatically. Pushes to other branches get their own preview URL, so you can check a change before it reaches production.

Want the fuller, hand-held version?

This guide assumes you already have a GitHub repo. If you are starting from zero, want to also make a GitHub account and pick an AI coding tool, follow the deeper walkthrough in Setuproll's free course lesson, Deploy Your Project to Vercel, part of the Beginner Quickstart course.

Result

Your Next.js project is live at a public vercel.app URL, and every push to your connected branch redeploys it automatically. Add a custom domain later from Project Settings, Domains once you are ready to move off the default subdomain.