Docker Compose for React with Next.js in Development Mode

by
Tiempo de lectura: < 1 minuto

Today I bring you a Docker Compose setup to run your React application with Next.js in development mode.

The first thing you need to do is create this docker-compose.yml file:

version: '3'

services:
  nextjs-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development

Now create this Dockerfile:

# Use a Node.js alpine image as base
FROM node:alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package.json package-lock.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Expose port 3000
EXPOSE 3000

# Start the Next.js development server
CMD ["npm", "run", "dev"]

Finally, you need to have these files inside your project, with the folder structure as follows:

node_modules
public
src
docker-compose.yml
Dockerfile

To run it, you need to execute:

docker compose up -d
Post Views: 4

Leave a Comment