Stars
Docker for Next.js: Take Image of your next app
calendar11 May 2024
read3 minute read

Docker for Next.js: Take Image of your next app

Learn How to use docker for next js Application. Make docker image, docker containers and etc.

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 ūüöÄ

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

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

Deployment Environment:

docker build -t my-nextjs-app-prod .
docker run -p 3000:3000 my-nextjs-app-prod

Stop Docker Container

docker stop <container-name>

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
  2. Tag your Docker image:
    docker tag my-nextjs-app yourusername/docker-for-next:latest
  3. Push the image to Docker Hub:
    docker push yourusername/docker-for-next:latest

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

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. ūüöÄ

Code Icon
Fasttrack Frontend
Development using CodeParrot AI
Background
CodeParrot Logo

CodeParrot

Ship stunning UI Lightning Fast

Y Combinator

Resources