explainx / blog
Vercel is the fastest way to deploy a Next.js app. This beginner guide covers what Vercel does, how to deploy from GitHub in under five minutes, how to set environment variables, configure custom domains, and understand the free tier limits.
Jun 27, 2026
Every professional software project runs in three separate environments: development on your laptop, staging as a private mirror of production, and production where real users live. Understanding why — and how environment variables tie it together — is one of the most practical things a beginner can learn.
Jun 27, 2026
Railway is where you deploy the parts of your stack that need to stay running: PostgreSQL databases, background workers, WebSocket servers, and Python backends. Here is a practical walkthrough of deploying an app, adding a database, wiring environment variables, and understanding when to use Railway instead of Vercel.
Jun 27, 2026
Next.js from zero: what it is, why people use it, how to install it with create-next-app, and how to build your first pages with the App Router. Real commands, no assumed knowledge.
Getting a web app from your laptop to the internet used to require renting a server, installing Node.js on it, configuring Nginx as a reverse proxy, setting up SSL certificates with Let's Encrypt, writing a deployment script, and then debugging why everything works locally but not in production. That whole process took hours, and it could go wrong in a dozen different ways.
Vercel collapses that entire process to: push to GitHub, done.
Vercel is a cloud platform built specifically for frontend and full-stack web applications. It was created by the same team that built Next.js, which means Next.js on Vercel is as close to zero-configuration deployment as exists today.
When you deploy to Vercel, it handles:
next build (or whatever build command your framework needs), compiles TypeScript, bundles assetshttps://app/api/ routes in Next.js become serverless functions automatically, no server management requiredVercel's Hobby (free) plan is generous for individual developers:
The free tier is enough for most side projects, portfolios, and early-stage products. The limits you will hit first are bandwidth (100 GB disappears quickly if you have images or large assets not cached properly) and serverless function execution time (functions time out after 10 seconds on Hobby vs 60 seconds on Pro).
Before deploying, make sure your code is on GitHub. If you are new to Git and GitHub, the beginner guide to Git and GitHub walks through pushing your first project.
Step 1: Create an account
Go to vercel.com and click "Sign Up." Choose "Continue with GitHub." Authorize Vercel to access your repositories.
Step 2: Import your project
On the Vercel dashboard, click "Add New Project." You will see a list of your GitHub repositories. Click "Import" next to the one you want to deploy.
Step 3: Configure the project
Vercel automatically detects Next.js and pre-fills:
next build.nextnpm installYou generally do not need to change any of these for a standard Next.js app. If you have environment variables (database URLs, API keys), add them here in the "Environment Variables" section before deploying.
Step 4: Deploy
Click "Deploy." Vercel clones your repository, runs npm install, runs next build, and deploys the result to its global CDN. The whole process takes approximately 30–90 seconds for a typical Next.js app.
Step 5: Get your URL
When the deployment finishes, Vercel shows you a URL like your-project-name.vercel.app. Click it. Your app is live.
Every real app has secrets it needs to keep out of the codebase: database connection strings, API keys, payment processor keys. In Vercel, you manage these in the project's Settings.
Go to your project → Settings → Environment Variables.
You will see three scopes:
vercel dev locally (optional)For a typical Next.js app you would set something like:
| Variable | Production value | Preview value |
|---|---|---|
DATABASE_URL | postgresql://prod-server/myapp_prod | postgresql://staging-server/myapp_staging |
STRIPE_KEY | sk_live_xxx | sk_test_xxx |
NEXTAUTH_SECRET | a long random string | a different long random string |
This is the environment separation pattern covered in the guide to production, staging, and development environments. Vercel makes it easy by building environment scoping directly into the dashboard.
Every time you open a pull request on GitHub, Vercel automatically builds and deploys that branch to a unique URL that looks like:
your-project-git-feature-branch-name-your-username.vercel.app
This URL is posted as a comment on your GitHub pull request. You can click it and see exactly what the change looks like in a real browser, with real environment variables, before merging.
This is enormously useful for:
Preview deployments use the "Preview" environment variable scope, which means you can configure them to hit a staging database instead of production — giving you a full staging environment automatically for every pull request.
Once your app is live on .vercel.app, adding your own domain takes about five minutes.
myapp.com) and click Addhttps://myapp.comVercel also supports subdomains (api.myapp.com, www.myapp.com) and wildcard domains (*.myapp.com for multi-tenant apps).
Vercel has a command-line tool that lets you deploy and preview from your terminal.
Install it:
npm install -g vercel
Authenticate:
vercel login
Deploy a preview (from your project directory):
vercel
Deploy to production:
vercel --prod
Run your app locally with production-like environment variables pulled from Vercel:
vercel dev
vercel dev is particularly useful because it loads your environment variables from Vercel's dashboard, so you do not need to maintain a local .env.local file manually.
If you have ever written a Next.js API route — a file at app/api/something/route.ts — that file automatically becomes a serverless function when deployed to Vercel. You do not configure anything. It scales automatically. You pay only for the compute time it uses.
The default runtime is Node.js. You can also opt into Vercel's Edge Runtime, which is a leaner JavaScript runtime that runs at the CDN edge (geographically close to your users) with lower latency but fewer Node.js APIs available.
Use Node.js runtime for:
fs, crypto, etc.)Use Edge Runtime for:
Specify the runtime at the top of your route file:
export const runtime = 'edge'; // or 'nodejs' (default)
You will outgrow the Hobby plan when:
The Pro plan is $20/month per user and lifts most of the practical limits.
Netlify — nearly identical to Vercel for frontend deployments. Strong ecosystem, slightly different DX. Worth knowing if Vercel's pricing becomes a factor.
Railway — better choice when you need persistent servers, background workers, or databases. Vercel uses serverless functions; Railway runs always-on processes. Many teams use Vercel for the Next.js frontend and Railway for the database and any backend workers. The beginner guide to Railway covers that use case in detail.
Fly.io — deploys Docker containers globally with persistent VMs. More control, more configuration, better for compute-intensive workloads.
Cloudflare Pages — similar to Vercel, with strong edge computing support via Cloudflare Workers. Free tier is very generous.
For most beginners building with Next.js, Vercel is the right first choice. It removes every deployment concern so you can focus on building the product. You will know when you have outgrown it.