Next.js × Docker 開発環境作成

はじめに

これからNext.jsにチャレンジしていく過程をメモ/備忘録として記録していきます。
同じようにこれから始める方の参考となればと思います。

やりたいこと

Next.jsの開発環境をDockerで構築したい

フォルダ準備

今回は最低限の環境として、Dockerfileは作らず公式イメージを利用します。

src配下にアプリのソースコードを置く構成にします。

.
├── docker-compose.yml
├── .env
└── src
    ├── .next
    ├── app
    ・
    ・

docker-compose.yml と　.envを準備

docker-compose.yml

services:
  next:
    image: ${NODE_IMAGE:-node:20-alpine}
    working_dir: /usr/src
    volumes:
      - ${HOST_DIR:-./src}:/usr/src
    command: npm run dev
    ports:
      - "${HOST_PORT:-3000}:3000"

.env

NODE_IMAGE=node:20-alpine
HOST_PORT=3000
HOST_DIR=./src

プロジェクト作成

1. コンテナを作成しておく

docker compose up -d

2. アプリインストール

docker compose run --rm next sh -c 'npx create-next-app@latest .'

最後に.を付けておくとカレントディレクトリにアプリを展開できます。

いくつか選択肢が出てくるので、好みに合わせて選択。詳しくは公式を参照。
（とりあえず全てデフォルトにしました）

Ok to proceed? (y) 
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

Success!と出てくれば成功！

added 359 packages, and audited 360 packages in 19s

133 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created src at /usr/src

３. コンテナを起動

docker compose up -d

4. アクセスしてみる

localhost:3000にアクセスしてみます。
Next.jsのページが出てくれば成功。

ホットリロードについて

docker desktop for windowsを使っている場合（WSLを使っていると）、
docker-compose.yml　にWATCHPACK_POLLING=trueを書いたり、
Next.config.js に設定を追加したり必要な模様。
Macだったのでホットリロードはデフォルトで有効になってました。

コンポーネントライブラリ追加

フロントエンド開発に慣れていないため、簡単にコンポーネントを使えるライブラリを導入することにします。

docker compose exec -it next sh

/usr/src # npm i -D daisyui@latest

インストール完了したら、tailwind.config.jsに設定を追加

tailwind.config.js

  plugins: [
    require('daisyui'),
  ],

公式に使い方が載っていますが、bootstrapのようにclassNameを書くだけでオシャレなコンポーネントが利用できます。

<div className="flex space-x-4">
    <button className="btn btn-info">Info</button>
    <button className="btn btn-success">Success</button>
    <button className="btn btn-warning">Warning</button>
    <button className="btn btn-error">Error</button>
</div>

おわりに

ホットリロード最高です。
これからアプリ作成の過程も少しずつ残していこうと思います。

参考