構築のフロー
- ローカルでNext.jsのプロジェクトを作成
- Dockerコンテナ化する
今回作成するディレクトリ構成です。
.
├── docker
│ └── next
│ └── Dockerfile
├── next
│ ├── node_modules
│ ├── public
│ └── src
│ └── app
└── docker-compose.yml
Nextプロジェクトを作成するディレクトリに移動します。
mkdir next && cd next
nextのセットアップ用のコマンドを実行(対話形式)
npx create-next-app@latest . --ts
-
現在のディレクトリに展開する場合はプロジェクト名のところを
.とすることでコマンドを実行しているディレクトリにNext環境を展開できます。 -
--tsオプションを付けることで、Typescriptに対応した形で生成されます。
設定オプションは対話形式で尋ねられるので、お好みに合わせてYes/Noを選択してください。選択をするときは← → 矢印キーで選択してからEnterで決定です。
もし選択をミスして戻りたい場合は面倒ですが、ESCキーを押してキャンセルしてから再度上記コマンドを実行してください。
今回はApp Routerで進めていきます。
Would you like to use ESLint? … No / Yes
Would you like to use Tailwind CSS? … No / Yes
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use App Router? (recommended) … No / Yes
Would you like to use Turbopack for `next dev`? … No / Yes
Would you like to customize the import alias (`@/*` by default)? … No / Yes
質問の意図とおすすめの設定（今回はこの設定で行います。）
| 質問 | おすすめ設定 | |
|---|---|---|
| 1 | ESLintを使用しますか？ | YES |
| 2 | Tailwind CSSを使用しますか？ | YES |
| 3 | "src/"ディレクトリの中にソースコードを格納しますか？ | YES |
| 4 | App Router を使用しますか？ | YES |
| 5 | Turbopack for next devを使用しますか？ |
NO |
| 6 | @/components などのエイリアスをカスタマイズしますか？ | NO |
オプションの意味の詳細を見たい場合は↓をopen
それぞれの設定の意味と詳細
※ChatGPT引用
1. Would you like to use ESLint? … No / Yes
🔹 意味:
ESLint（エスリント）を使用するかどうかの選択。
🔹 違い:
Yes → コードの品質や一貫性を保つために eslint が導入される。デフォルトの ESLint 設定が含まれる。
No → ESLint を設定せず、コードチェックは手動で行うか、別の方法で設定する必要がある。
💡 おすすめ: Yes
（ESLint はコード品質の維持に役立つため）
2. Would you like to use Tailwind CSS? … No / Yes
🔹 意味:
Tailwind CSS（ユーティリティファーストの CSS フレームワーク）を使用するかどうか。
🔹 違い:
Yes → tailwindcss パッケージがインストールされ、tailwind.config.js と postcss.config.js が設定される。
No → Tailwind CSS は使用せず、通常の CSS や別のスタイル手法（CSS Modules, Styled Components など）を利用。
💡 おすすめ: Yes （特に開発速度を重視するなら）
（デザインのカスタマイズが簡単で、柔軟なスタイリングが可能）
3. Would you like your code inside a src/ directory? … No / Yes
🔹 意味:
プロジェクトのディレクトリ構成を src/ フォルダの中にまとめるかどうか。
🔹 違い:
Yes → src/ ディレクトリが作成され、その中に pages, app, components, styles などが配置される。
No → ルートディレクトリ (./) に pages, app, components などが直接配置される。
💡 おすすめ: Yes
（大規模プロジェクトの場合、src/ を使うとファイルの管理がしやすくなる）
4. Would you like to use App Router? (recommended) … No / Yes
🔹 意味:
Next.js 13 から導入された App Router を使用するかどうか。これは pages/ ベースの従来のルーティングから、新しい app/ ベースのルーティングに切り替えるかの選択。
🔹 違い:
Yes → app/ ディレクトリが作成され、server components や layout.tsx などの機能を利用可能。
No → 旧来の pages/ ディレクトリを使用する（getServerSideProps などの API はそのまま使える）。
💡 おすすめ: Yes
（今後の Next.js の標準になるため、新規プロジェクトなら App Router を採用するのが良い）
5. Would you like to use Turbopack for next dev? … No / Yes
🔹 意味:
開発サーバー (next dev) のバンドラーとして、新しい Turbopack を使用するかどうか。
🔹 違い:
Yes → Turbopack を使用（Rust で書かれており、Webpack より高速な開発ビルド）。
No → 従来の Webpack を使用。
💡 おすすめ: No （2025年2月時点では）
（Turbopack はまだ安定していない部分があるため、Webpack の方が互換性が高い）
- Would you like to customize the import alias (@/* by default)? … No / Yes
🔹 意味:
@/components などのエイリアス（パスショートカット）をカスタマイズするかどうか。
🔹 違い:
Yes → デフォルトの @/ 以外のエイリアス（例: ~/ など）を設定できる。
No → デフォルトの @/ エイリアスを使用。
💡 おすすめ: No
（デフォルトの @/ で十分なことが多い。特別な理由がなければ変更不要）
この時点で、package-lock.json, package.json, tsconfig.jsonも生成されているか確認してください。
以下のコマンドでサーバーを起動します。
npm run dev
ブラウザでhttp://localhost:3000 にアクセスして以下のような画面が表示されればNext.js単体の環境構築は完了です。
Docker コンテナ化する
docker-compose.ymlを作成するディレクトリに戻る
cd -
Dockerfileを作成する
FROM node:18.19.1
WORKDIR /usr/src/next
COPY package.json package-lock.json* pnpm-lock.yaml* yarn.lock* ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]
docker-compose.ymlを作成する
services:
next:
container_name: next_app
build:
context: ./next # Nextプロジェクトのディレクトリを設定
dockerfile: ../docker/next/Dockerfile # NextプロジェクトのディレクトリからDockerfileへの相対パスを設定
tty: true
volumes:
- ./next:/usr/src/next # Nextプロジェクトのディレクトリ : Dockerfileで設定したワーキングディレクトリ となるように設定
environment:
- WATCHPACK_POLLING=true # ホットリロード機能を有効
command: sh -c "npm run dev"
ports:
- 3600:3000
コンテナを起動
docker compose up -d --build --build
ブラウザでhttp://localhost:3600 にアクセスして以下のような画面が表示されればここまで完了です。
お疲れ様でした。
次回以降は以下のコマンドで起動します。
docker compose up -d