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.
Assume that we already installed Docker and Docker Compose.
Steps for Implementing Docker Compose
There are 3 steps for implementing docker compose:
- Create Next.js project
- Create a Dockerfile for running commands
- Define services to run applications in docker-compose.yml file
- 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
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