Running a Next.js App with Docker

In this blog post, we'll explore how to containerize a Next.js application using Docker.

Introduction

Docker is a platform that packages an application and all its dependencies together in the form of containers. This containerization aspect ensures that the application works in any environment.

You can explore more through this Docker Docs

Prerequisites

Before we begin, make sure you have the following: -

Docker installed on your machine. You can download it from Docker's official website
A Next.js project that you want to containerize,(use app Router for following this blog )

Setting Up a Dockerfile

To containerize your Next.js application, create an Dockerfile in-the-root directory of your project.

Here's a sample Dockerfile for a Next.js app

FROM node:16

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "run","dev"]

Here is the Breakdown of what each line does

FROM node:16: We start with a base image that's like a foundation for our container. It's like choosing a specific version of a tool (Node.js version 16) to build on.

COPY package*.json ./ : We copy the files named package.json and package-lock.json from our computer into the container's workspace. Think of it as moving our project plan and dependencies into our workspace.

RUN npm install: We use the tool npm to install all the necessary parts of our project. Imagine setting up our workbench with all the tools we need.

COPY . . We copy the rest of our project files into the container's workspace. It's like bringing in all the materials we need for our project.

EXPOSE 3000: We're telling the container that it should be ready to listen on port 3000. Imagine this as opening a specific door (port) in our container, and it's now ready to communicate through that door with the outside world. It's like telling others which door to knock on to talk to our container.

CMD ["npm","run","dev"]: We say that when someone opens the container, they should start the project by running npm run dev. It's like having a sign that says, "Start here!"

You don't need to include the node_modules directory in the Docker container. To achieve this, create a .dockerignore file and add node_modules to it. After all, as all developer knows, node_modules is larger than the Earth itself! 😁

Creating a Docker Image

To build a Docker image for our Next.js app, open a terminal in our project directory and run the following command

docker build -t our-username-onto-docker/our-app-name:version .

-t specifying the name and optionally a tag for the image.
our-username-onto-docker is an example of a Docker Hub username or a custom registry if you're using one.
our-app-name is the name you want to give to your Docker image.
:version is the tag for the image (in this case, it's "latest").

So, the command sets the name of the Docker image to our-username-onto-docker/our-app-name:latest and builds it from the current directory indicated by .

After successfully completing all the steps, you will obtain a unique Docker image ID. Alternatively, you can also verify the existence of your Docker image by searching for it in Docker Desktop using your app's name

Running the Docker Container

Once the image is built, you can run a Docker container from it using the following command:

docker run -p 3000:3000 your-image-id

docker run: This is the command used to start a new Docker container based on a specified image.

-p 3000:3000: This part of the command specifies port mapping. It tells Docker to map port 3000 inside the container to port 3000 on your host machine. This means that if your application running inside the Docker container is listening on port 3000, you can access it through port 3000 on your host machine.

your-image-id: Replace this with the actual ID or name of the Docker image you want to use as the basis for your container. This is the image that will be used to create and run the container.

Now we can access our Next.js app by opening a web browser and navigating to http://localhost:3000. This URL corresponds to the port that we mapped when running the Docker container.

To stop the container, use the docker stop command

docker stop <CONTAINER ID>

To check CONTAINER ID use docker ps command

In this blog post, we've covered the process of containerizing a Next.js application using Docker. By following these steps, you can package your Next.js app into a Docker image, making it easier to deploy and manage across various environments.

Happy Coding 🎉