How to setup Next.js on Docker?

In this article we are going to show you how to setup React in docker container as well as how to setup Node.js and docker compose.

What is Next.js?

Next.js is a React framework that allows you to build supercharged, SEO-friendly, and extremely user-facing static websites and web applications.

Prerequisite Installation

Assume that we already installed Docker and Docker Compose.

Steps for Implementing Docker Compose

There are 3 steps for implementing docker compose:

1. Create Next.js project
2. Create a Dockerfile for running commands
3. Define services to run applications in docker-compose.yml file
4. Start and run project with the help of docker-compose.yml file

1. Create Next.js project

Run command below to create a new project:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

And name the project frontend.

2. Create a Dockerfile for running commands

Create a file named Dockerfile in the root of project with following content:

FROM composer:2.1 AS composer
WORKDIR /opt/app

# for building front-end
FROM node:16.13.0 AS front
WORKDIR /opt/app/frontend

RUN apt-get update && apt-get install -y git && apt-get install bash

COPY frontend/package.json frontend/yarn.lock ./
RUN yarn install
RUN cp -r node_modules /tmp/node_modules
COPY . /opt/app

3. Define services to run applications in docker-compose.yml file

Create a file named docker-compose.yml in the root of project with following content:

version: '3.7'

services:
  node:
    build:
      context: .
      target: front
    command: yarn dev
    volumes:
      - .:/opt/app
      - /opt/app/frontend/node_modules
    ports:
      - '443:443'
    depends_on:
      - nginx
    environment:
      VITE_APP_API_ENDPOINT: /api

4. Start and run project with the help of docker-compose.yml file

Run command below to build docker container:

$ docker-compose build

Run command below to up docker container:

$ docker-compose up