How to Dockerize a Next.js Application for beginners.
Tags: docker, nextjs, react, javascript
Published: 2022-05-11 02:28:21


Hey there, In today's article I am going to talk about how you can use [Docker](https://www.docker.com/) to containerize your [Next.js](https://www.nextjs.com/) application.
 
  
## What is Docker and why you should use it?


Docker is an open platform for developing, shipping, and running applications. Docker enables you to virtualize your whole application to separate it from your pc or development machine. You can virtualize your application on an operating system level, You can define what operating system your application will live on, What files it needs to have, which dependencies it need, etc.


**Its like setting up your application on a new pc with your desired OS and stuff but its all automated and you just have to define it once.**


Docker packages your application along with OS into smaller and portable virtual machine's like infrastructure called [Docker Container](https://www.docker.com/resources/what-container/).


![A chart showing what is a Docker container and how it works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luiia2n1svaimydfk98f.png)


## Enough talking, lets see how you can Dockerize your Next.js or React App.

### Prerequisites:

- Docker, check out how you can install docker on [Windows](https://docs.docker.com/desktop/windows/install/), [Mac](https://docs.docker.com/desktop/mac/install/) and [Linux](https://docs.docker.com/desktop/linux/install/).

- [Node.js](https://nodejs.org/en/download/), Download and install it on your pc.

### 1. Setting up new Next.js project

You can skip this step if you already have one.
Run `npx create-next-app docker_nextjs` in your terminal that should give you a new Next.js project with following files, You can use what ever name you want instead to docker_nextjs.

![project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7mqk0vvfej7efqmqc97.PNG)

Open your command line and navigate to the root of the project and run `npm run dev`, that will start your local development server, Go to [http://localhost:3000](http://localhost:3000), There you will be able to see the following default Next.js homepage.

![Next.js homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ssiguw03fgyqb6cyahs.png)

### 2. Dockerfile
Create a _`Dockerfile`_ in root directory of your project, Exact _`Dockerfile`_ with no any file extension.

####Dockerfile
>_`Dockerfile`_ is like a step by step script that tells Docker how it is going to build contianer image.


Go ahead and add the following code into your _`Dockerfile`_ .
```Dockerfile
FROM node:16-alpine

WORKDIR /frontend

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD npm run dev
```
#### Let me explain
1. `FROM node:16-alpine` will get a light weight Linux distribution with node version 16 installed on it, You can get image of any other OS you may prefer from [Docker hub](https://hub.docker.com/).

2. `WORKDIR /frontend` will initialize a working directory in your new OS.

3. `COPY package*.json ./` will copy _`package.json`_ into the working directory that we initialized in previous step.

4. `RUN npm install` will install all the dependencies of your project.

5. `COPY . .` will copy all the files from your current directory to the working directory of the container, You can use [.dockerignore](https://docs.docker.com/engine/reference/builder/#dockerignore-file) if you don't want to copy some files into your docker container.

6. `EXPOSE 3000` will expose port 3000 from your container to local network, You can check more on that [Here](https://docs.docker.com/engine/reference/builder/#expose).

7. finally `CMD npm run dev` will start the development server from your container.


### 3. Creating your first Docker container
Open your command line and navigate to the root directory of your project and run `docker build -t docker_nextjs:developement .` It will start building  your docker container with `docker_nextjs` name, you can change the name to whatever you like, I am using `:development` after name to assign the image with the development tag, and in the last I am using ` .` to tell docker that the _`Dockerfile`_ is in current folder.

####NOTE:
>Each time you will run this command, It will create a new image of your container, You can check what images are in your system by running `docker images` or `docker image ls`.

![list showing docker images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ply46glgf04rivwjpwb.PNG)

You can check more on that [Here](https://docs.docker.com/language/java/build-images/).

###4. Running docker container
There are two ways you can run your docker container image, one is through your command line and other is through docker desktop GUI, To run through command line, Open your terminal and run `docker run --publish 3000:3000 ` followed by the name and tag of your image.

In my case:
```
docker run --publish 3000:3000 docker_nextjs:developement
```
#### Through GUI:
Open Docker desktop add open the images tab, you will see all the images available on your pc, Select the one you want to start and click the run button, that should start it.

![running docker image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06vk36m69kvyqvgpbcle.gif)

That is it, Now go to [http://localhost:3000](http://localhost:3000) you should be able to see the homepage of your Next.js application.

###Note:
This article only shows how you can containerize your dev environment and make it portable, this article is not intended for production use.

Hopefully this article helped you, If you have any question or suggestion please feel free to mention that in comments below.

>Thanks for reading!