Stop 11 · Next.jsTopics · 16/16

Deployment

In short

A project on localhost only impresses you. Deploying puts it on a real URL you can send to recruiters, friends and family. With Next.js, the first deploy takes minutes.

Shipping a Next.js app to production — most commonly to Vercel (zero-config), but also self-hostable via Node.js or Docker.

The jaadu in cricket pads walks from the practice nets towards a packed stadium.

Think of it like this

Nets practice vs the real match

In the nets, nobody's watching and a mistake costs nothing. On match day there's a crowd, a scoreboard and real pressure. npm run dev is nets practice. Deployment is match day, so check the build and your settings before you walk out.

Watch it happen

What happens after git push

git push

Install

next build

Deploy

Live URL

1/5You push to main. Vercel sees the new commit on GitHub.

The big ideas

What you need to know

Build first

Run npm run build locally. If it fails here, it'll fail on the server too.

Vercel is the easy path

Connect your GitHub repo and it builds and deploys every push. Pull requests get preview URLs.

Env vars live on the host

Add secrets in the hosting dashboard, not in Git. Only NEXT_PUBLIC_ variables reach the browser.

Self-hosting works too

next build then next start runs on any Node server. output: "standalone" makes small Docker images.

How it works

Your first deploy

1
Build locally
Run npm run build and fix every error and type issue.
2
Push to GitHub
Commit your code, with .env files ignored.
3
Import on Vercel
Pick the repo. Vercel detects Next.js on its own.
4
Add env vars
Paste your API keys and database URL in project settings.
5
Check the live site
Open the URL on your phone and test every main page.

See it in code

Walk through the code

bash

1# Check it builds the way production will2npm run build3npm start          # serves the production build on port 30004 5# .env.local  (never commit this file)6DATABASE_URL="postgres://..."7NEXT_PUBLIC_SITE_URL="https://myportfolio.vercel.app"

1/3Build and serve the production version locally before you push.

npm start runs the real production build, which can behave differently from dev. Only the NEXT_PUBLIC_ value is visible in the browser.

Save yourself the pain

Common mistakes

Oops

Deploying without running a build locally, then debugging errors in the host's logs.

Do this instead

Run npm run build before every push. Most deploy failures show up here first.

Oops

Naming a secret key NEXT_PUBLIC_STRIPE_SECRET.

Do this instead

The NEXT_PUBLIC_ prefix sends it to every visitor. Keep secrets without that prefix.

Your mission

Go live today

~30 min

Quick check

Which environment variable can code in the browser read?

Go deeper

1Deploy a small Next.js project to Vercel and connect a GitHub repo for auto-deploys.
2Learn what `next build` + `next start` does for self-hosted deployments.
3Set up environment variables correctly for production vs preview deployments.