How to Deploy a Next.js App on Vercel for Free

How do you deploy Next.js to Vercel for free?

Connect your Git repository to Vercel, and it builds and deploys your Next.js app automatically on the free Hobby plan — no server config, no Dockerfile. Vercel made Next.js, so the integration is the smoothest you will find: push to your main branch and a production deploy goes live, push to any other branch and you get a preview URL.

This is the path of least resistance for a Next.js side project. You get global CDN delivery, automatic HTTPS, serverless functions for your API routes and preview deployments for every pull request, all without paying anything until you outgrow the Hobby limits.

The deploy, start to finish

The whole thing takes a few minutes once your code is on GitHub, GitLab or Bitbucket.

1. Push your Next.js project to a Git provider.
2. Sign in to Vercel and import the repository.
3. Vercel auto-detects Next.js and fills in the build settings, so you usually change nothing.
4. Add any environment variables before the first build.
5. Click deploy and wait for the build to finish — your app is live on a vercel.app URL.

From then on, every push triggers a new deploy. Merges to your production branch update the live site; other branches get isolated preview deployments you can share for review.

Environment variables and secrets

API keys and config go in Vercel's environment variables, set per environment for production, preview and development. Anything your server code needs — a database URL, a model provider key — stays server-side and is never shipped to the browser. Only variables you deliberately prefix as public are exposed to client code, so keep secrets unprefixed.

A common mistake is adding a variable after a build and wondering why it is missing. Environment variables are read at build and deploy time, so add or change them and then redeploy for the new values to take effect. Set them before your first production deploy to avoid a confusing empty value. Equally, remember the public prefix rule: a value meant for the browser must be deliberately marked public, while a secret such as a database password or model key must stay unprefixed so it never leaves the server. Mixing these up either breaks client code or leaks a secret, so decide for each variable which side of the boundary it belongs on.

Adding a custom domain

The free Hobby plan supports custom domains with automatic SSL. Add your domain in the project settings, then update your DNS records at your registrar to point at Vercel — either by changing nameservers or adding the records Vercel shows you. Certificates are issued and renewed automatically, so you never touch SSL config. Propagation can take a little time, after which your app answers on your own domain over HTTPS. If the domain shows as unverified for a while, that is almost always DNS still propagating rather than a misconfiguration, so give it time before changing anything.

When a deploy fails

Most failed Vercel deploys come down to a handful of causes, and the build log names the culprit. A build that works locally but fails on Vercel usually means a dependency is missing from your lockfile, or a step relies on something only present on your machine. A page that builds but errors at runtime often points to a missing environment variable. Type errors and lint failures stop the build outright on stricter setups. Read the log from the first error, not the last line — the earliest failure is the real one, and everything after it is noise. Reproducing the production build locally before pushing catches the majority of these before they ever reach Vercel.

Staying inside the free Hobby limits

The Hobby plan is generous but meant for personal, non-commercial projects. It includes bandwidth, build minutes and serverless function execution caps that comfortably cover a portfolio or a low-traffic app. Heavy image optimization, long-running functions or commercial use can push you past the limits, at which point Vercel prompts an upgrade. Two practical tips: keep API routes fast since serverless functions have execution limits, and lean on caching and static generation so most requests never hit a function at all. For genuinely commercial traffic, the Pro plan is the honest choice rather than stretching Hobby past its terms.

Prefer it built and managed for you?

If you would rather hand off the deployment, environment setup and scaling decisions, that is squarely what we do. Talk to BSH Technologies and we will get your Next.js app deployed properly, with sensible caching and a domain configured correctly the first time. See our cloud engineering services for how we take apps from a free deploy to production-grade infrastructure.