DockerでNextの環境構築

AuAgCu 2023/02/02に更新

ディレクトリ構成

.
├── front
│   └── Dockerfile
└── docker-compose.yml

Dockerfile

FROM node:19.5.0
ENV TZ=Asia/Tokyo
WORKDIR /app

docker-compose.yml

version: "3.8"
services:
  front:
    build:
      context: .
    tty: true
    ports:
      - "3000:3000"
    volumes:
      - ./react-sample:/src
    command: sh -c "npm install && npm run dev"

AuAgCu 2023/02/02

$ docker-compose run --rm front bash
$ npx create-next-app src --typescript

いくつか選択肢が出てくるので適切なものを選択する。今回は以下を選択

Ok to proceed? (y) → y
Would you like to use ESLint with this project? … No / Yes → Yes
Would you like to use src/ directory with this project? › No / Yes → Yes
Would you like to use experimental app/ directory with this project? › No / Yes →No
What import alias would you like configured? … @/* → 未入力でEnter

AuAgCu 2023/02/02

$ exit
$ docker-compose up -d

localhost:3000にアクセスして以下のような画面が表示されれば成功

このスクラップは2023/02/07にクローズされました