Sling Academy
Home/Next.js/How to set up Next.js with Docker Composer and Nginx

How to set up Next.js with Docker Composer and Nginx

Last updated: January 02, 2024

Learn to containerize a Next.js v13+ app using Docker Compose and serve it efficiently with Nginx, enhancing your development and deployment workflow.

Before you begin, ensure you have installed Docker, Docker Compose, and Node.js on your system. Familiarity with basic Docker concepts, Next.js app development, and Nginx configuration are also recommended.

Step 1: Create a Next.js App

npx create-next-app@latest nextjs-docker-nginx-app
cd nextjs-docker-nginx-app

Step 2: Dockerize the Next.js App

Start by creating a Dockerfile in the root directory of your Next.js app.

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Step 3: Configure Docker Compose

Create a docker-compose.yml file to define multi-container Docker applications.

version: '3'
services:
  nextjs:
    build: .
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=production

Step 4: Set Up Nginx as a Reverse Proxy

Create an Nginx configuration file, usually named default.conf, to set up Nginx as a reverse proxy.

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://nextjs:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Include this configuration in a Dockerfile for Nginx.

# Dockerfile for Nginx
FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d/
EXPOSE 80

Step 5: Update Docker Compose for Nginx

Edit the docker-compose.yml to include the Nginx service.

services:
  nextjs:
    # ... previous nextjs service definition
  nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - '80:80'
    depends_on:
      - nextjs

Step 6: Adding Environment Variables and Volumes

Manage sensitive data and persist data using environment variables and volumes in the docker-compose.yml

services:
  nextjs:
    # ... previous nextjs service definitions
    environment:
      - NEXT_PUBLIC_API_URL=${API_URL}
    volumes:
      - ./:/app
      - /app/node_modules
  nginx:
    # ... previous nginx service definitions
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf

Step 7: Production Optimization

To optimize for production, consider adding health checks, using multi-stage builds, or enabling HTTPS with Let’s Encrypt.

Now go ahead and run your stack.

docker-compose up -d

Conclusion

By following the steps above, you have encapsulated a Next.js v13+ app within a Docker container and leveraged Nginx’s powerful features for serving it. This setup is scalable, production-ready, and streamlines development and deployment processes.

Next Article: Nest.js: How to Write Unit Tests with Jest

Previous Article: How to Dockerize a Next.js App for Production

Series: Next.js: Configuration & Deployment

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported
  • Fixing Next.js Error: Only Absolute URLs Are Supported