Next.js × Docker 最速環境構築

記事一覧

1. Next.js × Docker 最速環境構築
2. Next.js入門１ ページ追加
3. Next.js入門２ コンポーネント
4. Next.js入門３ 無記名関数 & イベントハンドラー
5. Next.js入門４ Hooks
6. Next.js入門５ Todoアプリ（タスク一覧）
7. Next.js入門６ Todoアプリ（タスク追加）
8. Next.js入門７ Todoアプリ（タスク詳細）
9. Next.js入門８ Todoアプリ（タスク編集, 削除）

詳しくDockerを知りたい方向け

https://zenn.dev/kate0418/articles/4910b4c94acbba

【 事前準備 】

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

【 ディレクトリ作成 】

1. ファイルを編集

Dockerfile

FROM node:22
WORKDIR /workdir

docker-compose.yml

services:
  app:
    build: ./
    volumes:
      - .:/workdir

2. コンテナに入る

ターミナル（コンテナ外）

docker compose build

docker compose run app bash

3. ディレクトリ作成コマンドを実行

ターミナル（コンテナ内）

npx -y create-next-app next-app --typescript --no-eslint --tailwind --no-src-dir --app --turbopack --no-import-alias

以下のようになればOK

.
├── next-app
├── docker-compose.yml
└── Dockerfile

【 アプリケーション起動 】

1. ファイルを編集

Dockerfile

FROM node:22
WORKDIR /workdir

COPY . .
WORKDIR /workdir/next-app
RUN npm install
CMD ["npm", "run", "dev"]
EXPOSE 3000

docker-compose.yml

services:
  app:
    build: ./
    volumes:
      - .:/workdir
    ports:
      - 3000:3000

2. アプリケーション起動コマンドを実行

ターミナル（コンテナ外）

docker compose build

docker compose up -d

http://localhost:3000にアクセスして以下のような画面が出ればOK