DEV Community

Cover image for How to Dockerize a Nextjs Application Using Docker

How to Dockerize a Nextjs Application Using Docker

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 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 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 from where we can download Docker Desktop.

Docker install

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

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

Install success

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

Accept terms

Choose recommended settings

recommended_settings

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

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

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

You can install WSL by following this guide from Microsoft Learn.

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. 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

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
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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

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

docker_gui

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
Enter fullscreen mode Exit fullscreen mode

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.

localhost:3000

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.

Happy Dockerizing!

Top comments (0)