ハッカソン個人備忘録⑨：Next.js（TypeScript） + Docker ローカル開発環境構築（Docker Compose対応）

はじめに

Next.js + Docker の開発環境を構築し、ホットリロード（Hot Reload）が快適に動作するように設定する手順を紹介します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

コードを編集した際に自動でブラウザが更新されるような、ストレスのない開発環境の構築の参考になれば幸いです！

書こうと思ったきっかけ

複数人での開発やOS間の環境差異を減らすために Docker を活用する場面が増えました。

しかし、Docker 環境で Next.js のホットリロードが効かないという悩みをよく聞きます。

実際に自分もその問題に直面したため、設定方法を整理して記録として残しておくことにしました。

✅ 構成概要

• Next.js: React ベースのフレームワーク
• Docker: コンテナで環境を統一
• ホットリロード: 開発中の変更がリアルタイムで反映される

実際のリポジトリ

📁 ディレクトリ構成（例）

next-app/
├── Dockerfile
├── docker-compose.yml
├── next.config.js
├── package.json
├── postcss.config.js
├── public/
├── pages/
└── styles/

1️⃣ Next.js アプリの初期化

npx create-next-app@latest next-app
cd next-app

2️⃣ Dockerfile 作成

# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["npm", "run", "dev"]

3️⃣ docker-compose.yml 作成

# docker-compose.yml
version: '3.8'
services:
  next-app:
    container_name: next-app
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true

🔁 CHOKIDAR_USEPOLLING=true によってファイル変更を正確に検知できるようになります。

4️⃣ .dockerignore 作成（重要）

node_modules
npm-debug.log

5️⃣ 開発サーバー起動

docker compose up --build

✅ 動作確認

1. ブラウザで http://localhost:3000 にアクセス
2. pages/index.js を編集して保存
3. ホットリロードが反映されることを確認

📝 補足：ホットリロードが効かない場合の対処

• volumes: の設定が正しいか確認
• CHOKIDAR_USEPOLLING が有効か確認
• 特に Windows の場合、ファイル変更がコンテナに伝わらないケースがあるので注意

まとめ

この構成を使えば、チーム全体で同じ環境を再現でき、開発効率もアップします。今後のプロジェクトでスムーズなスタートを切るためにも、ぜひ活用してみてください。

必要に応じて GitHub テンプレート化するのもおすすめです！