Vercel

## 1. Learning Objectives By the end of this lesson, you will be able to deploy a Next.js app to Vercel, understand preview and production deployments, configure build settings, and reason about which Next.js features Vercel runs for you. Difficulty: Beginner. ## 2. Prerequisites - Next.js project structure. - Production builds. - Environment variable basics. ## 3. Overview Vercel is the deployment platform created by the team behind Next.js. It auto-detects Next.js projects, runs the production build, creates preview deployments for changes, and serves the app with framework-aware infrastructure. ## 4. Why This Topic Matters Deployment is where routing, rendering, caching, images, server code, and environment variables become real production behavior. A working local app is only halfway done. ## 5. Real-World Analogy Deploying to Vercel is like sending a finished package through a smart distribution center. It reads the label, chooses the right route, and gives you tracking links for every version. ## 6. Core Concepts | Concept | Meaning | |---|---| | Production deployment | The live deployment for the production branch or promoted build. | | Preview deployment | A unique URL for a branch, commit, or pull request. | | Framework preset | Vercel's auto-detected build and output settings for Next.js. | | Build command | Usually `next build` through `npm run build`. | | Output | The optimized application artifacts Vercel serves. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The build confirms the app compiles locally. The Vercel deploy uploads the project, applies the Next.js framework preset, and returns a deployment URL. ## 10. Interactive Playground Try this: - Create a branch. - Deploy it and inspect the preview URL. - Merge the branch and compare it with the production URL. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Skipping local build | Dev mode hides production-only problems. | Run `npm run build` before deploys. | | Missing env vars | Local `.env.local` is not automatically present in production. | Add variables per environment. | | Assuming previews are production | Preview URLs are isolated deploys. | Test previews, then promote or merge. | | Hardcoding domains | Preview URLs change by deployment. | Use configured environment values. | ## 12. Best Practices - Keep `build` and `start` scripts accurate. - Use preview deployments for review. - Store secrets in the platform, not in Git. - Read build logs when a deployment fails. - Treat production promotion as a deliberate release step. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Static assets | Broad support | Served as normal JS/CSS/image files. | | Server rendering | Browser receives HTML | Runtime is server-side. | | Preview URLs | Normal HTTPS pages | Useful for QA and stakeholder review. | ## 14. Interview Questions **Easy:** What is a preview deployment? Answer: A unique deployed version of the app for a branch, commit, or pull request before production release. **Medium:** Why should you run `next build` before deploying? Answer: It catches production compilation, type, lint, and static generation issues that development mode may not expose. **Hard:** Why does Vercel work well with Server Components and Route Handlers? Answer: It understands Next.js build output and maps server-rendered routes, functions, assets, and caches onto platform infrastructure. ## 15. Debugging Exercise Bug report: "The app works locally but the Vercel deployment crashes during build." Solution Check the build logs, confirm all required production environment variables exist, run `npm run build` locally, and make sure server-only SDKs are not initialized before runtime configuration is available. ## 16. Practice Exercises - Easy: Identify the app's build command. - Medium: Explain preview vs production deployments. - Hard: Write a deployment checklist for a Next.js feature branch. ## 17. Scenario-Based Challenge A pull request changes metadata, adds a Route Handler, and requires `DATABASE_URL`. What deployment checks should happen before merge? Walkthrough Run the production build, verify the preview deployment, confirm preview environment variables exist, test the route handler, and inspect the generated metadata in the preview. ## 18. Quick Quiz 1. What command creates a production build? Answer: `next build`. 2. What is a preview deployment for? Answer: Reviewing a non-production version. 3. Should secrets be committed? Answer: No. 4. What file usually defines build scripts? Answer: `package.json`. 5. What should you read after a failed deploy? Answer: Build logs. ## 19. Summary & Key Takeaways - Vercel auto-detects and optimizes Next.js apps. - Preview deployments make review safer. - Production builds catch issues dev mode misses. - Environment variables must be configured per deployment environment. - Build logs are the first debugging surface. ## 20. Cheat Sheet | Task | Command / Place | |---|---| | Local build | `npm run build` | | Preview deploy | `vercel` | | Production deploy | `vercel --prod` | | Build settings | Vercel project settings | | Secrets | Vercel environment variables | ## 21. Further Reading - Vercel Docs: Next.js on Vercel. - Next.js Docs: Deploying. - Next.js Docs: Production Checklist. ## 22. Next Lesson Preview Next, you will learn how Docker deployments package a Next.js app for container-based infrastructure.