Docker for Next.js

Gautam Vaja - May 11 - - Dev Community

What is Docker? 🐳

  • Docker is an open-source platform that uses containerization technology to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all the parts it needs, such as libraries and other dependencies, and ship it all out as one package.
  • Docker Container: A lightweight, standalone, executable package that includes everything needed to run a piece of software, including the code, runtime, libraries, environment variables, and config files.
  • Docker Image: A blueprint for creating Docker containers. Images are immutable files that outline the instructions for a complete and executable version of an application.

Creating a Next.js Image with Docker 🚀

In the root of your Next.js project, create a file named Dockerfile and add the following content:

Dockerfile

# Use the lightweight Node.js 18 Alpine image
FROM node:18-alpine

# Set environment variable with a default for production
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}

# Establish working directory
WORKDIR /app

# Copy and install dependencies
COPY package*.json ./
RUN if [ "$NODE_ENV" = "development" ]; \
        then npm install; \
        else npm install --only=production; \
    fi

# Copy application code
COPY . .

# Build the application in production
RUN if [ "$NODE_ENV" = "production" ]; \
        then npm run build; \
    fi

# Expose port 3000
EXPOSE 3000

# Specify the command to start the app
CMD if [ "$NODE_ENV" = "development" ]; \
        then npm run dev; \
        else npm start; \
    fi
Enter fullscreen mode Exit fullscreen mode

Building and Running the Docker Container 🛠️

To build and run the Docker container, enter the following commands in your terminal:

Development Environment:

docker build --build-arg NODE_ENV=development -t my-nextjs-app-dev .
docker run -p 3000:3000 -v $(pwd):/app my-nextjs-app-dev
Enter fullscreen mode Exit fullscreen mode

Deployment Environment:

docker build -t my-nextjs-app-prod .
docker run -p 3000:3000 my-nextjs-app-prod
Enter fullscreen mode Exit fullscreen mode

Stop Docker Container

docker stop <container-name>
Enter fullscreen mode Exit fullscreen mode

How to Push the Docker Image to Docker Hub

To share your Docker image via Docker Hub, follow these steps:

  1. Login to Docker Hub:
   docker login
Enter fullscreen mode Exit fullscreen mode
  1. Tag your Docker image:
   docker tag my-nextjs-app yourusername/my-nextjs-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Push the image to Docker Hub:
   docker push yourusername/my-nextjs-app:latest
Enter fullscreen mode Exit fullscreen mode

You can now access your Docker image from any machine by pulling it from Docker Hub.
To pull the image, use the following command:

docker pull yourusername/my-nextjs-app:latest
Enter fullscreen mode Exit fullscreen mode

Now onwards, you can deploy your Next.js application using Docker containers. It's a great way to ensure consistency across different environments and simplify the deployment process. 🚀

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .