Docker for Next.js Applications - Containerization and Deployment
Loading...
Loading...
Join JS Mastery Pro to apply what you learned today through real-world builds, weekly challenges, and a community of developers working toward the same goal.
When you’re trying to ship a Next.js app (shameless plug for the Next.js course) to a production server, you often end up with bunch of errors…and you’ve just checked everything locally 😞.
That is why 10x developers use a tool called Docker.
We already had a few introductions to Docker on our channel, but let’s do a quick recap.
Simply put, a solution to all your development and deployment problems. It is a platform that packages your app in a reproducible environment. It allows developers to get the same behavior across all devices, OSs and providers.
Developers love it because it eliminates the “works on my machine” problem by packaging the app with its exact libraries, frameworks, and package locks into a reproducible environment. This makes it fast to spin up, easy to scale, and reliable for enterprise projects.
The whole Docker service consists of:
First of all, make sure you have Docker CLI installed on your system, we can do that using the command on our terminal
docker -vIf you get the docker version printed out, perfect, if not, you are cooked…jkjk. You can download it here…or if you are on windows here. Now, let’s dive in!
To create a Docker image which we need to run a container on our server, we have to create a Dockerfile . Dockerfile is a special file which Docker engine reads when bundling our app in an environment. We use it to define the system our app will run in, define all the necessary steps and finally, running our Next.js app.
To put it plainly, it tells Docker what base system to start from, what software to install, what files to copy in, and what commands to run when the container starts.
This is an example of what a good Dockerfile for the Next.js project would look like:
# Get the latest node image in which the app will run
FROM node:20
# Set the working directory inside the container
WORKDIR /app
# Copy dependency info to the container
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the app source code to the container
COPY . .
# Build the app
RUN npm run build
# Expose the port the app will run on
EXPOSE 3000
# Start the app
CMD ["npm", "start"]In the folder where our Dockerfile is located in, we can run this command to create the image:
docker build -t <image name> .You can replace image name with whatever name you choose.
To actually spin up our image locally, so we can access it through the exposed port, run:
docker run --rm -p 3000:3000 --name <container name> <image name>After that, you can go to your browser and open up localhost:3000. You should be able to see your nice website!
Since Next.js is a framework developed by Vercel, you do get some benefits when deploying the app there instead of using Docker and deploying the app on your own server:
With all this in mind, Vercel can be the better option, but that bill can also grow rather quick as your app gets popular. That is when your own infrastructure and Docker take over. The choice is always yours, but it never hurts to have a few extra cards to play when the moment arrives.
This template should work for most of your apps, so feel free to copy it over and over.
If you also want to learn how to automate this whole process and learn how to use docker effectively in your development environment, check out our Backend Course!