Env, build and deploy

Safe environment variables, next/image, next/font, the build and Vercel.

Updated October 8, 2026

What "production" means

Development (npm run dev) is optimized for you: instant reloads, detailed error messages. Production (npm run build + deploy) is optimized for users: minified code, pre-generated pages, caching, a CDN. Differences show up between the two — that's why you test the build before deploying.

Environment variables

Environment variables are settings that differ between environments (local, preview, production) and secrets that have no place in the code: the database URL, API keys.

.env.local         → local values — NOT committed to Git
.env               → default values, no secrets

Kind	Example	Where it's available
no prefix	`DATABASE_URL`	only on the server — safe for secrets
`NEXT_PUBLIC_`	`NEXT_PUBLIC_SITE_URL`	in the browser too — inlined into the bundle at build time

Never put a secret in a NEXT_PUBLIC_ variable — anyone can read it from the page's JS.

Extra protection: import 'server-only' in modules that use secrets (like shared/api/db.ts in this project) — the build fails if they accidentally reach the client.

Built-in optimizations

Tool	What it does	Why
`next/image`	resizes, converts to WebP/AVIF, lazy loading	smaller images, no CLS
`next/font`	downloads the font at build time and serves it from your domain	no external request, no text "jump"
`next/dynamic`	loads a component only when it's needed	a smaller initial bundle
Server Components	zero JS for non-interactive UI	a faster page

<Image src={cover} alt="..." width={800} height={450} priority />   // priority = the main image (LCP)

The build

npm run build     # checks types, prerenders, shows each route's type
npm run start     # runs the build locally — check here before deploying

The legend in the output: ○ static, ◐ partial prerender, ƒ dynamic.

Deploying to Vercel

Push to GitHub.
vercel.com → Add New Project → import the repo.
Add the environment variables (Settings → Environment Variables), separately for Production / Preview.
Every push to main = production; every PR = its own preview URL — see Workflow.

A checklist before production

npm run build with no errors or warnings
the environment variables are set; nothing secret with NEXT_PUBLIC_
metadata + metadataBase + a sitemap
not-found and error pages
Lighthouse: performance, accessibility, SEO
Server Actions and Route Handlers: auth + validation
images through next/image, fonts through next/font

Summary

Test build + start locally before deploying.
Secrets without a prefix; NEXT_PUBLIC_ reaches the browser.
Vercel: push → deploy; PR → preview.

Official sources

Exercises

#1Does it reach the browser?

Write isExposedToClient(name) — true only for variables with the NEXT_PUBLIC_ prefix.

⌘ Enter runs

○NEXT_PUBLIC_SITE_URL → true
○DATABASE_URL → false

#2Required env

Write requireEnv(env, keys) that throws an Error with the message 'Missing env: A, B' (the missing or empty keys, in order) or returns an object with only the requested keys.