Hosting and deployment

What "putting a site online" means

Hosting = a place where your code runs or lives, reachable from the internet. Deploying = the process that gets a new version of the code there. Hardly anyone uploads files over FTP anymore: you connect a repository to a platform, and every change you publish triggers a deploy automatically.

Types of hosting

The further down the table, the more control and the more work you get: on a VPS, security updates, backups and restarts are on you. Serverless doesn't mean "no server", it means you don't manage it: a function starts on demand and you pay for what you use. It does have a maximum duration, though, so it can't keep a process open forever.

What a CDN does

A CDN is a network of servers (edges) in dozens of cities. A visitor in Chișinău gets the files from the nearest edge instead of the main server (the origin) in the US.

• It caches static files and pre-generated pages.
• It terminates the HTTPS connection close to the user, so connecting is faster.
• It absorbs traffic spikes and some attacks (DDoS).

Vercel, Netlify and Cloudflare include a CDN; you don't set it up separately.

Build vs runtime

The difference matters for environment variables: some are read at build time and "frozen" into the code, others are read on every request.

Environment variables and secrets

API keys and database URLs never go in your code and never go into Git. Locally they live in .env.local (listed in .gitignore); on the platform you set them in the dashboard (Vercel → Settings → Environment Variables), separately for Production, Preview and Development.

• In Next.js, a variable prefixed with NEXT_PUBLIC_ is copied into the JavaScript sent to the browser, so anyone can read it. Only put public values there (the site URL, an analytics ID).
• NEXT_PUBLIC_ values are replaced at build time. If you change them in the dashboard, you need a new deploy for the change to show up.
• Accidentally published a secret? Deleting the commit isn't enough: revoke the key and generate a new one.

More details in the Env, build and deploy lesson.

The deploy flow

git pushto a branch or to mainthe platform gets notified→CI buildinstalls packages and runs npm run buildif it's a branch→preview deploya unique URL, just for checkingafter merging into main→productionyour domain serves the new version

CI (continuous integration) is the server that builds and runs checks (tests, lint) on every push. Vercel and Netlify include it; you can add GitHub Actions too. You'll learn about git push and branches in the Git topic.

Preview deployments

Every branch or pull request gets a preview deployment: a separate URL (something like project-git-feature-team.vercel.app) with exactly that version. Teammates, the client or the designer check it on a real link while production stays untouched. Be careful: previews use the Preview environment variables, so don't point them at the production database.

Rollback

Every deploy is kept as a separate version that never changes. If production breaks, don't rush a fix: roll back (on Vercel, Instant Rollback) to the previous deploy, which goes live in seconds with no new build. Then hunt the bug calmly. Keep in mind that a rollback restores the code, not the data: a database migration stays applied.

Custom domain and HTTPS

Add the domain in the platform (Settings → Domains), then add the DNS records it shows you. The full steps, including the Cloudflare setup, are in the Domains and DNS lesson. The HTTPS certificate is issued and renewed automatically (usually through Let's Encrypt) as soon as DNS points to the platform.

Logs and monitoring

• Build logs: why a deploy failed (a type error, a missing package).
• Runtime logs: errors from your functions in production, request by request.
• Uptime monitor (UptimeRobot, Better Stack): emails you when the site goes down.
• Error tracking (Sentry): collects errors from users' browsers, with their context.
• Analytics and Web Vitals: how fast the site is for real users (see Performance).

Costs and free tiers

For a personal project, free tiers are usually enough. Watch out for:

• Vercel's free plan (Hobby) is for personal, non-commercial use only.
• Set spend limits and alerts on paid plans; an attack or a bot can run up a big bill.
• Read what happens when you go over: some platforms pause the site, others charge extra.

Summary

• Static/CDN for simple sites, serverless platforms for Next.js, a VPS or containers when you need control.
• Secrets live in the platform dashboard, not in Git; NEXT_PUBLIC_ reaches the browser and is fixed at build time.
• Push → build → preview → production; when something breaks, roll back first and fix second.

Official sources

• Next.js — Deploying
• Next.js — Environment Variables
• Vercel — Deployments
• Vercel — Instant Rollback
• MDN — What is a CDN?