Fullstack CourseLearn by building
Back to week 3

Topic

Deploy Next.js

Definition

A Next.js deployment builds the application into a production artifact with environment-specific configuration and runtime constraints.

In simpler words

Production is a separate environment: it needs the right build, public values, cookies, and API connection—not just a working local server.

The deployed web app must communicate safely with the separately deployed Nest API without exposing secrets.

After this you can

  • Prepare production configuration
  • Distinguish public and server-only environment variables
  • Verify cookie and API-origin behavior

Build for the target environment

Run the production build before release to catch route, type, and bundling failures that development mode may not surface. The host must support the Next runtime capabilities that the application uses.

Variables prefixed NEXT_PUBLIC are embedded for browser use at build time. Never place database credentials, JWT signing values, or internal service secrets behind that prefix.

Public versus server-only configuration

// Safe for browser exposure
NEXT_PUBLIC_API_ORIGIN=https://api.example.com

// Server-only — never NEXT_PUBLIC
JWT_SECRET=...
DATABASE_URL=...

The naming convention signals whether a value becomes visible in the client bundle.

Mistake: trusting local cookies in production

// Wrong conclusion: “cookie auth worked on localhost, so deployment is ready”

// Right: verify HTTPS, SameSite, Secure, domain, credentials, and Nest CORS in staging.

Cookie behavior depends on the deployed origins and browser security context.

Release the web and API as a system

Definition

The Next deployment and Nest deployment have separate artifacts but one user journey.

In simpler words

Validate their origins, credential policy, and failure behavior together before calling the release complete.

Use deployment-specific environment configuration rather than committing environment files.

Check the deployed app with a real browser to confirm login, ticket reads, ticket writes, and logout.

Live playground

Deploying playground

Classify each environment variable as browser-safe or server-only.

Verify cookie + API origin settings in production.

next-deploying

Keep in mind

  • Run the production build before deploying.
  • Expose only deliberate NEXT_PUBLIC values.
  • Test cookie-JWT flows against the deployed web and Nest origins.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.

Checking your session…

10 questions · concept 3 · syntax 2 · practical 3 · logic 2

Concept1. Which statement is the most accurate definition of deploying Next?
Syntax2. Which code-level choice is consistent with deploying Next?
Practical3. A reviewer sees this situation. Which decision best applies deploying Next?
Logic4. What reasoning correctly explains why this approach works for deploying Next?
Concept5. Which boundary does the correct use of deploying Next preserve?
Practical6. What is the safest next step when implementing deploying Next?
Syntax7. Which implementation direction matches the rule for deploying Next?
Logic8. Which consequence follows from applying deploying Next correctly?
Concept9. Which claim about deploying Next is true in this monorepo?
Practical10. Which team practice best demonstrates deploying Next?