Next.js · module 10 of 16
Deployment & Production
Vercel is built by the Next.js team — zero-config deployment with automatic CI/CD on every push.
What this module covers
4 steps · Next.js
Step 1. Deployment & Production
Vercel is built by the Next.js team — zero-config deployment with automatic CI/CD on every push. # 1. Push to GitHub git init && git add . && git commit -m "init" git remote add origin https://github.com/you/app git push -u origin main # 2. Import at vercel.com/new # 3. Add environment variables in dashboard # 4. Deploy Environment variables: # .env.local (never commit) DATABASE_URL=postgresql://... API_SECRET=sk-... # Public (sent to browser) NEXT_PUBLIC_SITE_URL=https://myapp.com process.env.DATABASE_URL // server only process.env.NEXT_PUBLIC_SITE_URL // anywhere Production checklist: use next/image everywhere, prefer Server Components, add generateStaticParams for dynamic routes, use ISR over SSR where possible, split large Client Components with dynamic import, add loading.jsx to data-heavy routes.
Every other environment variable stays server-only by default — the NEXT_PUBLIC_ prefix is the one deliberate opt-in for values safe to ship to the browser bundle. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [Next.js] Does the component read process.env.NEXT_PUBLIC_SITE_URL?
Step 2. Quiz: Deployment & Production
Answer these questions about deploying and production-hardening a Next.js app.
NEXT_PUBLIC_ exposes an env var to the browser; Vercel auto-deploys on push to main; static content benefits most from SSG/ISR over SSR. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [Next.js] Answer the quiz below.
Step 3. Production Config Checklist
Prepare a Next.js app for production: define a NEXT_PUBLIC_SITE_URL usage, and export a metadata object with title and description reading from it.
This ties together the whole course: file-based routing, the Metadata API from the layouts lesson, and environment variables from this one, all in a single production-ready export. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [Next.js] Does metadata define title, description, and an openGraph.url from the public env variable?
Step 4. Mini project: Deployment & Production
Prepare a Next.js app for production: define a NEXT_PUBLIC_SITE_URL usage, and export a metadata object with title and description reading from it. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.
This ties together the whole course: file-based routing, the Metadata API from the layouts lesson, and environment variables from this one, all in a single production-ready export. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [Next.js] Does metadata define title, description, and an openGraph.url from the public env variable?
Loading code lab...