Practice

(1/5)

1. Why is deployment configuration important in a Next.js application?

easy

A. It disables all security features by default.

B. It changes the app's color scheme automatically.

C. It only affects the app's local development environment.

D. It controls how the app runs on the server and connects to services.

Solution

Step 1: Understand deployment configuration role
Deployment configuration sets how the app behaves on the server, including connections and performance.
Step 2: Compare options
Only It controls how the app runs on the server and connects to services. correctly describes deployment configuration's purpose; others are unrelated or incorrect.
Final Answer:
It controls how the app runs on the server and connects to services. -> Option D
Quick Check:
Deployment config = server behavior control [OK]

Hint: Think where your app runs and what config controls there [OK]

Common Mistakes:

Confusing deployment config with UI settings
Assuming it only affects local development
Ignoring security and performance roles

2. Which of the following is the correct way to specify an environment variable in Next.js deployment?

easy

A. Set variables in next.config.js under env property.

B. Write variables directly inside a React component.

C. Use a CSS file to store environment variables.

D. Declare variables only in package.json scripts.

Solution

Step 1: Identify environment variable setup in Next.js
Next.js uses next.config.js with an env property to define environment variables for deployment.
Step 2: Eliminate incorrect options
Options A, C, and D do not follow Next.js patterns for environment variables.
Final Answer:
Set variables in next.config.js under env property. -> Option A
Quick Check:
Env vars in next.config.js = correct [OK]

Hint: Remember env vars go in next.config.js, not in components [OK]

Common Mistakes:

Placing env vars inside React components
Trying to store env vars in CSS or package.json
Not using next.config.js for deployment env vars

3. Given this next.config.js snippet:

module.exports = {
  reactStrictMode: true,
  env: { API_URL: 'https://api.example.com' }
};

What will process.env.API_URL output in the deployed app?

medium

A. An error will occur

B. undefined

C. 'https://api.example.com'

D. 'http://localhost:3000'

Solution

Step 1: Check env variable definition
API_URL is set to 'https://api.example.com' in next.config.js env property.
Step 2: Understand process.env usage in Next.js
In deployment, process.env.API_URL reads the value from next.config.js env, so it outputs the URL string.
Final Answer:
'https://api.example.com' -> Option C
Quick Check:
process.env.API_URL = 'https://api.example.com' [OK]

Hint: Env vars in next.config.js are available via process.env [OK]

Common Mistakes:

Expecting undefined if not set in .env files
Confusing local and deployment values
Assuming process.env is empty in deployment

4. You deployed a Next.js app but it crashes with an error about missing environment variables. What is the most likely cause?

medium

A. You used the wrong React version in package.json.

B. You forgot to set environment variables in the deployment platform.

C. You did not import React in your components.

D. You used CSS variables instead of JavaScript variables.

Solution

Step 1: Analyze error cause
Missing environment variables error usually means deployment platform lacks required env vars.
Step 2: Check other options
Options B, C, and D are unrelated to environment variable errors.
Final Answer:
You forgot to set environment variables in the deployment platform. -> Option B
Quick Check:
Missing env vars = not set on deployment [OK]

Hint: Check deployment platform env vars first when app crashes [OK]

Common Mistakes:

Blaming React version for env var errors
Forgetting to configure deployment environment
Confusing CSS variables with env vars

5. You want to deploy a Next.js app that uses a private API key. Which deployment configuration practice best protects this key?

hard

A. Store the API key in environment variables on the deployment server and access it only in server-side code.

B. Hardcode the API key inside React components for easy access.

C. Include the API key in the public next.config.js env property so client can use it.

D. Put the API key in a CSS file to hide it from JavaScript.

Solution

Step 1: Understand security for API keys
Private keys must not be exposed to client-side code to prevent leaks.
Step 2: Choose secure deployment config
Storing keys in environment variables on the server and using them only server-side keeps them safe.
Step 3: Eliminate unsafe options
Hardcoding or exposing keys in client-accessible config or CSS is insecure.
Final Answer:
Store the API key in environment variables on the deployment server and access it only in server-side code. -> Option A
Quick Check:
Private keys stay server-side only [OK]

Hint: Keep secrets server-side in env vars, never expose to client [OK]

Common Mistakes:

Exposing API keys in client code
Hardcoding secrets in components
Misusing next.config.js env for private keys

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single server without CDN	N/A	N/A	High network latency delays paint	[X] Bad
Edge caching with CDN	N/A	N/A	Fast asset delivery enables quick paint	[OK] Good

Why deployment configuration matters in NextJS - Performance Evidence

Practice

Solution

Step 1: Understand deployment configuration role

Step 2: Compare options

Final Answer:

Quick Check:

Solution

Step 1: Identify environment variable setup in Next.js

Step 2: Eliminate incorrect options

Final Answer:

Quick Check:

Solution

Step 1: Check env variable definition

Step 2: Understand process.env usage in Next.js

Final Answer:

Quick Check:

Solution

Step 1: Analyze error cause

Step 2: Check other options

Final Answer:

Quick Check:

Solution

Step 1: Understand security for API keys

Step 2: Choose secure deployment config

Step 3: Eliminate unsafe options

Final Answer:

Quick Check:

Ready to prove it?