How to Dockerize a Nextjs Application Using Docker
Tags: nextjs, docker, javascript, react
Published: 2024-05-27 10:02:59

Containerization has become a popular method for deploying and managing applications. Docker, one of the leading containerization platforms, provides developers with a consistent environment across different systems, making it easier to package, ship, and run applications.

## Introduction

[Docker](https://docker.com) is a platform designed to simplify the process of building, shipping, and running applications. It uses containerization technology to package an application and its dependencies into a standardized unit, called a container. Containers are lightweight and portable, and ensure that the application runs consistently across different environments like Windows and Linux.

[Next.js](https://nextjs.org) is a powerful React framework, that is widely used for building server-side rendered (SSR) or static web applications. Dockerizing a Next.js application can streamline the deployment process and ensure consistency between development, testing, and production environments


## Downloading and Installing Docker Desktop for Windows

The first place to start is the [official Docker website](https://docs.docker.com/desktop/install/windows-install/) from where we can download Docker Desktop.

![Docker install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sixnz9u59svc2es3j2dq.png)

Click on the “Docker Desktop for Windows” button.
Once the download is complete, double-click the installer to start the installation process.
Follow the on-screen instructions to complete the installation


![Unpack file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buwxa5pixjwy8dcoijfz.png)

For Docker to be able to properly register with Windows, a restart is required at this point.

![Install success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/604rny9pha2mjhdkjcwp.png)

After the restart, Docker will start automatically and you should see the window below.

![Accept terms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdumz5rnppsj9uhciak3.png)

Choose recommended settings

![recommended_settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dizsq2w8gz4kn7p6fq5k.jpeg)

Click on signup or login if you already have an account otherwise you can skip this step by clicking on continue without signing in.

![welcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9m00mqv5qvsm1tnhiu4.png)

If WSL 2 (Windows Subsystem for Linux) is enabled on your machine then we are good to go, otherwise you will get the below

![wsl_error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km7hk3581wni0mqm2e9h.jpeg)

To resolve this issue, let’s Activate WSL from Windows. Go to
**Control Panel -> Programs -> Turn Windows features Turn On or Off**
Then you need to check

- Windows Subsystem For Linux
- Windows Hypervisor Platform **(Optional)**
- Virtual Machine Platform

![wsl_resolve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp020zjnoioab99sg7st.png)

You can install WSL by following this guide from [Microsoft Learn](https://learn.microsoft.com/en-us/windows/wsl/install).

Next, restart your computer. Now your docker should work properly.


## Downloading and Installing Nodejs for Windows

Here is the link to the website to download [Nodejs](https://nodejs.org/en). Download the installer and follow the steps and prompts to install Nodejs. Once you have installed Nodejs you will have access to Node Package Manager (NPM) and `npx` command that will help in creating a Nextjs project.

If you prefer reading, continue reading otherwise watch this YouTube video below

{% embed https://www.youtube.com/watch?v=thj0jletyfQ %}

## Creating and 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, open your terminal and run the command `npx create-next-app@latest` to create a new Next.js project and follow the instructions 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
```

**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`). The name and tag are personal 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`.

You will see the output below on your terminal

![docker_build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6azmb4e24k1f8cbudr1.png)

Also, the image will be available in your Docker Desktop GUI as shown below

![docker_gui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2xjagzeqxw4gyosbj46.png)

**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
```

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


![localhost:3000](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg1ar8lfo1k3uq1ejz55.png)

## Conclusion

The above steps and procedures entail the simple process of dockerizing a Nextjs application. In the case of multi-container applications such as databases and other applications, Docker Compose is a tool that helps you define and share multi-container applications. With Compose, you can create a `YAML` file to define the services with a single command.

You can find the final code [here](https://github.com/Jacobkyalo/nextjs-docker).

Happy Dockerizing!