How to Dockerize a Next.js Application Using Docker for Beginners

Hello, today we will explore how Docker can be used to Dockerize your Next.js application. Docker is an open-source platform that allows you to containerize your applications to develop, ship, and run applications efficiently.

To begin containerizing your Next.js app using Docker, you’ll need to fulfill the following prerequisites:

1. Docker: Install Docker on your Windows, Mac, or Linux system. You can find the installation on Docker’s website.

2. Node.js: Download & Install it on your PC.

Now, let’s dive into the process of Dockerizing your Next.js application:

1. Setting up a New Next.js Project

If you already have a Next.js project, you can skip this step. Otherwise, follow the instructions below:

In your terminal, run the command npx create-next-app@latest to create a new Next.js project and follow the instruction provided in the terminal by Next.js.

2. Creating the Dockerfile

In the root directory of your project, create a file called “Dockerfile” (without any file extension). This file serves as a step-by-step script for Docker to build the container image.

Copy and paste the following code into your Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD npm run dev

Here’s a breakdown of the Dockerfile:

• FROM node:18-alpine instructs Docker to use a lightweight Linux distribution with Node.js version 18 installed. You can choose a different OS image from Docker Hub if you prefer.

• WORKDIR /app sets the working directory inside the container to /app.

• COPY package*.json ./ copies the package.json file into the working directory.

• RUN npm install installs all the dependencies for your project.

• COPY . . copies all the files from the current directory into the working directory of the container. You can utilize a .dockerignore file to exclude specific files from being copied.

• EXPOSE 3000 exposes port 3000 from the container to the local network.

• CMD npm run dev starts the development server inside the container.

3. Building Your Docker Container

In your terminal, navigate to the root directory of your project and run the command docker build -t nextjs_docker:dev . This command builds the Docker container with the specified name (nextjs_docker) and tag (dev). Feel free to customize the name and tag as per your preference. The . indicates that the Dockerfile is located in the current directory.

Note: Each time you run this command, a new image of your container will be created. You can view the images on your system by running docker images or docker image ls.

4. Running the Docker Container

There are two ways to run your Docker container image: through the command line or using the Docker Desktop GUI.

To run the container through the command line, open your terminal
and execute the following command:

docker run --publish 3000:3000 nextjs_docker:dev

If you prefer using the Docker Desktop GUI, open Docker Desktop and navigate to the “Images” tab. Select the desired image and click the “Run” button.

Once the container is running, access your Next.js application by visiting http://localhost:3000/. You should be able to see the homepage of your Next.js application.

Please note that this article only covers the process of containerizing your development environment for portability purposes. It is not intended for production use.