ReviseAlgo Logo

Deployment

Vercel

Learn how to deploy a Next.js App Router application on Vercel using previews, production deployments, framework detection, and platform features.

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

    ConceptMeaning
    Production deploymentThe live deployment for the production branch or promoted build.
    Preview deploymentA unique URL for a branch, commit, or pull request.
    Framework presetVercel's auto-detected build and output settings for Next.js.
    Build commandUsually next build through npm run build.
    OutputThe 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

    MistakeWhy It HappensCorrect Approach
    Skipping local buildDev mode hides production-only problems.Run npm run build before deploys.
    Missing env varsLocal .env.local is not automatically present in production.Add variables per environment.
    Assuming previews are productionPreview URLs are isolated deploys.Test previews, then promote or merge.
    Hardcoding domainsPreview 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

    FeatureBrowser ImpactNotes
    Static assetsBroad supportServed as normal JS/CSS/image files.
    Server renderingBrowser receives HTMLRuntime is server-side.
    Preview URLsNormal HTTPS pagesUseful 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

    TaskCommand / Place
    Local buildnpm run build
    Preview deployvercel
    Production deployvercel --prod
    Build settingsVercel project settings
    SecretsVercel 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.