How to Dockerize a Next.js Application Using Docker for Beginners
Tags: nextjs, javascript, docker, react
Published: 2023-06-30 19:59:52

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.

![Desktop app of Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6gx3gjnxl12ahnws1oz.png)

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.


![Next.js Template landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh8x5cvqezqpujlv8kvb.png)

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