Next.js(TypeScript) × Docker(Compose V2) 最速構築Tips.

はじめに

こんにちは！ @Keichan_15 です！

勉強の一環でNext.jsを使用したTech Blogの作成を始めたのですが、環境構築にDockerを使用したので備忘録も兼ねて残しておこうと思います。

シンプルな構成ではありますが、改善点等あればコメント頂けますと幸いです！

準備

まず、任意のディレクトリに新規フォルダを作成し、該当フォルダに移動します。
※筆者は nextjs_techblog という名前のフォルダを作成しました。ここはご自身でお好きなお名前にしてくださいね。

terminal

$ mkdir nextjs_techblog
$ cd nextjs_techblog

Dockerfile

続いてDockerfileを作成します。
Dockerfileを作成するディレクトリは、新規フォルダの直下で構いません。

Dockerfile

FROM node:18.17.1

WORKDIR /app

node.jsのバージョンは 推奨版 を参考にして設定しています。

compose.yaml

続いてcompose.yaml を作成します。
こちらもDockerfileと同様、新規フォルダ直下に作成してください。

compose.yaml

services:
  app:
    build:
      context: .
    tty: true
    volumes:
      - ./src:/app
    environment:
      - WATCHPACK_POLLING=true
    command: sh -c "npm run dev"
    ports:
      - "3000:3000"

補足として、Next.jsのホットリロード機能を有効にするために以下の記述をcompose.yamlに記述しています。
ホットリロード、凄い便利…。

+    environment:
+      - WATCHPACK_POLLING=true

その他の記述は他の構築記事と遜色無いシンプルな構成にしています。

ちなみに、ここまでのディレクトリ構成は以下の通りになります。

(任意のディレクトリ名)
├── Dockerfile
└── compose.yaml

アプリ作成

ここまで完了したら、以下のコマンドを入力してください。

terminal

$ docker compose run --rm app sh -c 'npx create-next-app . --typescript'

ちなみに create-next-app を叩くと選択を迫られる例の質問は、以下のように設定しました。
ここは個人的な好みの問題になってくるので、あくまで参考までに…

terminal

Need to install the following packages:
  create-next-app@13.4.19
Ok to proceed? (y) y
✔ Would you like to use ESLint? … No / Yes → Yes
✔ Would you like to use Tailwind CSS? … No / Yes → Yes
✔ Would you like to use `src/` directory? … No / Yes → Yes
✔ Would you like to use App Router? (recommended) … No / Yes → Yes
? Would you like to customize the default import alias? › No / Yes → No

terminal

added 329 packages, and audited 330 packages in 2m

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

found 0 vulnerabilities
Success! Created app at /app

Success!の表記が出ていれば、アプリのひな型の作成は完了しています。
最後にコンテナを起動してみましょう。

terminal

$ docker compose up

無事コンテナの起動が完了したら、http://localhost:3000/ にアクセスしてNext.jsのページが開くか確認してみましょう。
以下のような表示になっていれば成功です！お疲れ様でした！

参考

おわりに

いかがでしたでしょうか。

今回は極力最小構成でNext.jsの環境構築をDockerで行いました。

Next.jsの構築記事はいくつも見かけるのですが、中々シンプルなものが無かったりして少し難儀したこともあり、今回執筆に至りました。

次はVercelでデプロイしてみたいなあ～～(ウワサでは凄い楽チンと聞く)