Dockerizing NextJS for development - Quickstart guide

In the ever-evolving landscape of web development, containerization has become a critical tool for creating consistent and reproducible environments. This article will guide you through the process of creating a Docker container for NextJS development, ensuring a smooth and efficient workflow.

Set up the Docker environment

To begin, we'll create a docker-compose.yml file that defines our NextJS development environment. This file will outline the services, build context, and development-specific configurations.

version: '3.3'

services:
  app:
    build:
      context: .
    image: nextjs-dev
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    env_file:
      - .env.local
    develop:
      watch:
        - action: sync
          path: ./src
          target: /app/src
          ignore:
            - node_modules/
        - action: rebuild
          path: package.json

Let's break down the key components of this configuration:

  1. Service Definition: We define a service named "app" which represents our NextJS application.
  2. Build Context: The build section specifies the context for building the Docker image. In this case, it's set to the current directory (.).
  3. Image Naming: We name our image "nextjs-dev" for easy reference.
  4. Port Mapping: The ports section maps the container's port 3000 to the host's port 3000, allowing access to the NextJS development server.
  5. Environment Configuration: We set the NODE_ENV to "development" and use an .env.local file for additional environment variables. Its not mandatory to add that file when it's not necessary.
  6. Development Watch: The develop section utilizes Docker's watch feature for development. It syncs the ./src directory and rebuilds when package.json changes.

Optimizing for Development

The develop section is particularly important for a smooth development experience:

  1. File syncing:
- action: sync
  path: ./src
  target: /app/src
  ignore:
    - node_modules/

This configuration syncs the ./src directory to /app/src in the container, ignoring node_modules for better performance.

  1. Rebuild Trigger:
- action: rebuild
  path: package.json

This triggers a rebuild of the container when package.json changes, ensuring that new dependencies are properly installed.

Dockerfile

To complement the docker-compose.yml, we need to create a Dockerfile:

FROM node:18-alpine

WORKDIR /app
COPY package.json ./
RUN npm install

COPY . .
EXPOSE 3000
CMD npm run dev

I think it's pretty easy to see what is happening inside that image.

Running the Development Environment

To start your NextJS development environment, run:

docker-compose up --build

This command builds the image and starts the container. Your NextJS application will be accessible at http://localhost:3000.

Summary

Dockerizing a NextJS application for development provides a consistent environment across different machines and simplifies the setup process. By using Docker Compose and a well-structured Dockerfile, we can create a development environment that's both efficient and easy to manage especially for junior developers.

Happy dockerizing!