NextJS Deployment and Scaling Syllabus

Deployment and Scaling syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Deployment and Scaling in NextJS, not a summary of it.

1. 1

   Vercel Deployment

   3 topics

   • Setting Up Vercel
   • Deploying a Next.js App
   • Environment Variables
2. 2

   Custom Server

   3 topics

   • When to Use a Custom Server
   • Setting Up a Custom Server
   • Handling Routes in Custom Server
3. 3

   Scaling and Load Balancing

   3 topics

   • Horizontal Scaling
   • Load Balancers
   • Monitoring and Logging

Deployment and Scaling flashcards for NextJS

20 of 51 cards from the Deployment and Scaling deck — real questions with worked answers.

1. What is Vercel and why is it the recommended platform for deploying Next.js apps?

   Vercel is the cloud platform built by the creators of Next.js. It is recommended because it offers zero-configuration deployment, native support for Next.js features (SSR, ISR, Server Components, Edge/Serverless Functions, Image Optimization), a global edge network/CDN, and automatic Git-based CI/CD.

2. What are the basic steps to set up a project on Vercel from a Git repository?

   1) Create a Vercel account and connect your Git provider (GitHub/GitLab/Bitbucket). 2) Click 'Add New Project' and import the repository. 3) Vercel auto-detects Next.js and sets the framework preset. 4) Configure environment variables if needed. 5) Click 'Deploy'.

3. What is the Vercel CLI command to deploy the current project directory?

   Run `vercel` to create a preview deployment, or `vercel --prod` to deploy to production. First-time use runs `vercel login` and links the local folder to a Vercel project.

4. On Vercel, what is the difference between a Preview deployment and a Production deployment?

   A Preview deployment is created for every push to a non-production branch (or PR) and gets a unique preview URL for testing. A Production deployment is created from the production branch (default `main`) and is served on the project's production domain.

5. What build and output settings does Vercel use by default for a Next.js app?

   Build command: `next build`; Output: Vercel handles the `.next` output automatically via its Next.js build adapter; Install command: `npm install` (or detected package manager); Development command: `next dev`. These are auto-detected from the framework preset.

6. What happens automatically when you push a commit to the production branch of a Vercel-linked repo?

   Vercel triggers a new build and production deployment automatically (Git-based CI/CD). On success it atomically swaps the production alias to the new deployment; the previous deployment remains accessible via its immutable URL for instant rollback.

7. What is an environment variable and why is it used in a Next.js deployment?

   An environment variable is a key-value pair set outside the source code to configure the app per environment (development, preview, production). It is used to store secrets (API keys, database URLs) and environment-specific config without hardcoding them in the codebase.

8. In Next.js, what determines whether an environment variable is exposed to the browser?

   Only variables prefixed with `NEXT_PUBLIC_` are inlined into the client bundle and exposed to the browser. All other environment variables are available only on the server (during build/runtime) and are never sent to the client.

9. How does Next.js load environment variables from files, and in what precedence order?

   Next.js loads from `.env` files automatically. Precedence (highest first): `.env.$(NODE_ENV).local` > `.env.local` (not loaded in test) > `.env.$(NODE_ENV)` > `.env`. Actual process environment variables always override file values.

10. Why should `.env.local` be added to `.gitignore`?

    `.env.local` typically holds secrets (API keys, database credentials) specific to a developer's machine. Committing it would leak secrets into version control, so it must be excluded from Git.

11. How do you access an environment variable named DATABASE_URL in Next.js server code?

    Reference it via `process.env.DATABASE_URL`. On the server this reads the runtime value; because it lacks the `NEXT_PUBLIC_` prefix it is not exposed to the client.

12. When are `NEXT_PUBLIC_` environment variables embedded into the Next.js bundle?

    At build time. Their values are statically inlined into the JavaScript bundle during `next build`, so changing them requires a rebuild/redeploy rather than just a restart.

13. How do you configure environment variables for a deployed project on Vercel?

    In the Vercel dashboard under Project Settings > Environment Variables, add key-value pairs and select the target environments (Production, Preview, Development). You can also use `vercel env add` from the CLI. A redeploy applies the changes.

14. What is a custom server in Next.js?

    A custom server is a Node.js server (e.g. using Express, Koa, or the built-in `http` module) that you write yourself to programmatically handle requests and hand them off to Next.js's request handler, replacing the default `next start` server.

15. List common reasons you WOULD need a custom server in Next.js.

    Integrating Next.js into an existing Node/Express app, implementing fully custom server-side routing/rewrites not expressible via config, running a WebSocket/Socket.io server on the same process, custom server-level middleware/proxying, or specialized caching logic.

16. Why does using a custom server disable deployment on Vercel and similar serverless platforms?

    A custom server requires a single long-running Node process, which is incompatible with serverless/automatic scaling. Platforms like Vercel deploy Next.js as serverless functions and cannot run a persistent custom server, so features like ISR and automatic optimizations may be lost.

17. What is the recommended alternative to a custom server for most routing/logic needs in modern Next.js?

    Use built-in features instead: Middleware (`middleware.ts`), Route Handlers / API Routes, `rewrites`/`redirects` in `next.config.js`, and the App Router. These avoid opting out of serverless deployment and preserve automatic optimizations.

18. In a custom server, which Next.js function creates the app instance and which produces the request handler?

    `next({ dev })` creates the Next.js app instance; calling `app.getRequestHandler()` returns the handler function used to process incoming HTTP requests. You must also `await app.prepare()` before serving.

19. Write the minimal structure of a Next.js custom server using the built-in http module.

    const next = require('next'); const { createServer } = require('http'); const app = next({ dev: process.env.NODE_ENV !== 'production' }); const handle = app.getRequestHandler(); app.prepare().then(() => { createServer((req, res) => handle(req, res)).listen(3000); });

20. In a custom server, what is the purpose of calling `await app.prepare()`?

    `app.prepare()` initializes the Next.js app (compiles pages in dev, loads the build manifest in prod) and must resolve before the server starts handling requests, ensuring Next.js is ready to render.

See more Deployment and Scaling flashcards →

Planning Deployment and Scaling for NextJS

Deployment and Scaling (NextJS) FAQ