Docker deployment in NextJS - Mini Project: Build & Apply

Docker Deployment for Next.js App

📖 Scenario: You have built a simple Next.js app and want to deploy it using Docker. Docker helps package your app with everything it needs to run anywhere.Imagine you want to share your app with friends or deploy it on a server easily. Docker makes this simple by creating a container that runs your app exactly the same way on any computer.

🎯 Goal: Build a Docker setup for a Next.js app that installs dependencies, builds the app, and runs it inside a container.You will create a Dockerfile step-by-step to prepare your app for deployment.

📋 What You'll Learn

Create a Dockerfile starting from the official Node.js image

Set the working directory inside the container

Copy package.json and package-lock.json to install dependencies

Copy the rest of the app files

Build the Next.js app inside the container

Expose the correct port

Set the command to start the Next.js app

💡 Why This Matters

🌍 Real World

Docker helps developers package their Next.js apps so they run the same on any computer or server, making deployment easier and more reliable.

💼 Career

Knowing how to Dockerize web apps is a valuable skill for developers working in teams or deploying apps to production environments.

1

Start Dockerfile with base image and working directory

Create a Dockerfile that starts with the base image node:18-alpine and sets the working directory inside the container to /app using WORKDIR.

NextJS

FROM node:18-alpine
# Set working directory
# Your code here

Need a hint?

Use FROM to specify the base image and WORKDIR to set the folder inside the container.

2

Copy package files and install dependencies

Add lines to copy package.json and package-lock.json from your project folder to the container's /app folder. Then run npm install to install dependencies.

NextJS

FROM node:18-alpine
WORKDIR /app

# Copy package files and install dependencies
# Your code here

Need a hint?

Use COPY to copy files and RUN npm install to install packages.

3

Copy app files and build the Next.js app

Copy all remaining app files to the container using COPY . .. Then add a line to build the Next.js app inside the container by running npm run build.

NextJS

FROM node:18-alpine
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

# Copy app files and build the app
# Your code here

Need a hint?

Use COPY . . to copy all files and RUN npm run build to build the app.

4

Expose port and set start command

Add a line to expose port 3000 using EXPOSE 3000. Then set the container start command to npm start using CMD ["npm", "start"].

NextJS

FROM node:18-alpine
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build

# Expose port and set start command
# Your code here

Need a hint?

Use EXPOSE to open the port and CMD to set the start command.