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.
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
For Docker to be able to properly register with Windows, a restart is required at this point.
After the restart, Docker will start automatically and you should see the window below.
Choose 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.
If WSL 2 (Windows Subsystem for Linux) is enabled on your machine then we are good to go, otherwise you will get the below
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
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
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
Also, the image will be available in your Docker Desktop GUI as shown below
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/. You should be able to see the homepage of your Next.js application.
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)