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.