Docker deployment in NextJS - Step-by-Step Execution

Concept Flow - Docker deployment

Write Dockerfile

↓

Build Docker Image

↓

Run Docker Container

↓

Container serves Next.js app

↓

Access app via browser

This flow shows how you create a Dockerfile, build an image, run a container, and then access your Next.js app inside Docker.

Execution Sample

NextJS

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

This Dockerfile sets up a Next.js app environment, installs dependencies, builds the app, and starts the server.

Execution Table

Step	Action	Details	Result
1	Read Dockerfile	FROM node:18-alpine	Base image set to Node 18 Alpine
2	Set working directory	WORKDIR /app	Working directory inside container is /app
3	Copy files	COPY package*.json ./	package.json and package-lock.json copied
4	Install dependencies	RUN npm install	Node modules installed
5	Copy app files	COPY . .	All app files copied to /app
6	Build app	RUN npm run build	Next.js app built for production
7	Set start command	CMD ["npm", "start"]	Container will run 'npm start' on launch
8	Build image	docker build -t nextjs-app .	Docker image 'nextjs-app' created
9	Run container	docker run -p 3000:3000 nextjs-app	Container runs, app accessible on localhost:3000
10	Access app	Open browser at http://localhost:3000	Next.js app loads in browser

💡 Process ends after app is running and accessible in browser

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 6	Final
Working Directory	undefined	/app	/app	/app	/app
Files in /app	empty	package.json, package-lock.json	all app files	all app files + build output	all app files + build output
Node Modules	none	none	installed	installed	installed
Docker Image	none	none	none	none	nextjs-app
Container State	not running	not running	not running	not running	running

Key Moments - 3 Insights

Why do we copy package.json files before running npm install?

Copying package.json first allows Docker to cache the npm install step if dependencies don't change, speeding up rebuilds. See execution_table rows 3 and 4.

What happens if we don't run npm run build before starting the app?

Without building, the Next.js app won't be optimized or ready to serve, so the container might fail or serve development code. See execution_table row 6.

Why do we map port 3000 in docker run?

Mapping port 3000 lets us access the Next.js app running inside the container from our browser on localhost:3000. See execution_table row 9.

Visual Quiz - 3 Questions

Look at the execution_table, what is the working directory inside the container after step 3?

A /app

B /root

C /usr/src/app

D /home/node

💡 Hint

Check the 'Details' column in row 2 of execution_table where WORKDIR is set.

At which step does the Next.js app get built for production?

A Step 4

B Step 6

C Step 7

D Step 9

💡 Hint

Look for 'RUN npm run build' in the 'Action' column of execution_table.

If we skip copying package.json before npm install, what changes in the execution flow?

A npm install will fail because no package.json is present

B The app will build faster

C Docker cache for npm install won't work, slowing rebuilds

D The container will not start

💡 Hint

Refer to key_moments about why package.json is copied early.

Concept Snapshot

Docker deployment for Next.js:
- Write Dockerfile with base node image
- Copy package.json, run npm install
- Copy app files, run npm run build
- Set CMD to start app
- Build image with docker build
- Run container with port mapping
- Access app at localhost:3000

Full Transcript

This visual execution shows how to deploy a Next.js app using Docker. First, you write a Dockerfile starting from a Node.js base image. Then you set the working directory inside the container to /app. Next, you copy the package.json files and run npm install to get dependencies. After that, you copy all your app files and run npm run build to prepare the app for production. The Dockerfile sets the command to start the app with npm start. You build the Docker image with docker build and run it with docker run, mapping port 3000 so you can access the app in your browser at localhost:3000. Key points include copying package.json first to use Docker cache and building the app before starting it. This step-by-step flow helps beginners see how Docker packages and runs a Next.js app.

Practice

1. What is the main purpose of using Docker for deploying a Next.js application?

easy

A. To write the Next.js code faster

B. To package the app with all dependencies for consistent running anywhere

C. To replace the need for React in the app

D. To automatically generate CSS styles

Solution

1. Step 1: Understand Docker's role

   Docker packages an app with its environment so it runs the same on any machine.

2. Step 2: Relate to Next.js deployment

   This packaging ensures the Next.js app and its dependencies work consistently everywhere.

3. Final Answer:

   To package the app with all dependencies for consistent running anywhere -> Option B

4. Quick Check:

   Docker ensures consistent app environment = A [OK]

Hint: Docker packages app and dependencies for consistent deployment [OK]

Common Mistakes:

• Thinking Docker speeds up coding
• Confusing Docker with React features
• Assuming Docker styles the app automatically

2. Which of the following is the correct first line in a Dockerfile for deploying a Next.js app using Node.js 18?

easy

A. FROM node:18-alpine

B. RUN node install 18

C. COPY node:18 /app

D. START node version 18

Solution

1. Step 1: Identify Dockerfile base image syntax

   The Dockerfile starts with FROM followed by the base image name and tag.

2. Step 2: Match Node.js 18 base image

   Node official images use 'node:18-alpine' for a lightweight Node 18 environment.

3. Final Answer:

   FROM node:18-alpine -> Option A

4. Quick Check:

   Dockerfile base image starts with FROM = B [OK]

Hint: Dockerfile starts with FROM and image name [OK]

Common Mistakes:

• Using RUN instead of FROM for base image
• Trying to COPY node version as a command
• Using START which is not a Dockerfile command

3. Given this Dockerfile snippet for Next.js deployment:

FROM node:18-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

What happens when you run this Docker image?

medium

A. The app builds and starts serving on default port

B. The app installs dependencies but never builds

C. The app builds but fails to start

D. The Dockerfile causes a syntax error

Solution

1. Step 1: Analyze Dockerfile commands

   It sets working directory, copies package.json, installs dependencies, copies all files, builds app, then starts it.

2. Step 2: Understand CMD effect

   CMD runs 'npm start' which serves the built Next.js app on default port 3000.

3. Final Answer:

   The app builds and starts serving on default port -> Option A

4. Quick Check:

   Build then start with npm = C [OK]

Hint: RUN builds, CMD starts app in Dockerfile [OK]

Common Mistakes:

• Assuming build step is missing
• Thinking CMD does not start the app
• Believing Dockerfile syntax is wrong here

4. You wrote this Dockerfile for your Next.js app but get an error when running the container:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
CMD npm start

What is the likely cause of the error?

medium

A. npm run build should be replaced with npm build

B. COPY command should come after RUN npm install

C. WORKDIR must be set after RUN commands

D. CMD syntax is incorrect; it should be an array

Solution

1. Step 1: Check CMD syntax

   CMD should be an array like ["npm", "start"] to run correctly in Docker.

2. Step 2: Verify other commands

   COPY before npm install is fine; WORKDIR before RUN is correct; npm run build is valid.

3. Final Answer:

   CMD syntax is incorrect; it should be an array -> Option D

4. Quick Check:

   CMD needs array syntax = A [OK]

Hint: Use array syntax for CMD in Dockerfile [OK]

Common Mistakes:

• Writing CMD as a string instead of array
• Moving COPY after npm install unnecessarily
• Changing npm run build to npm build incorrectly

5. You want to deploy a Next.js app with Docker and ensure it listens on port 8080 instead of the default 3000. Which change should you make in your Dockerfile and app start command?

hard

A. Modify Dockerfile to FROM node:8080 and keep app default

B. Change CMD to ["npm", "start", "--port", "8080"] without app changes

C. Set ENV PORT=8080 and run CMD ["npm", "start"] with app configured to use process.env.PORT

D. Expose port 8080 but keep app listening on 3000

Solution

1. Step 1: Set environment variable for port

   Use ENV PORT=8080 in Dockerfile so app can read the port from environment.

2. Step 2: Ensure app uses process.env.PORT

   Next.js app must listen on process.env.PORT to respect Docker port setting.

3. Final Answer:

   Set ENV PORT=8080 and run CMD ["npm", "start"] with app configured to use process.env.PORT -> Option C

4. Quick Check:

   Use ENV and app reads process.env.PORT = D [OK]

Hint: Set ENV PORT and app reads process.env.PORT [OK]

Common Mistakes:

• Changing base image to node:8080 (invalid)
• Exposing port without changing app port
• Passing port as npm start argument without app support