はじめに
Next.jsの開発環境をDockerで構築していきます。
DockerfileでNext.jsのアプリが実行されるコンテナのイメージを用意し、Docker Composeで実行する方法をとります。そうすることでバックエンドとしてAPIサーバを追加した時にもdocker-composeコマンドを打つだけで開発環境が実行できるようにします。
Dockerについては下記を参考してください。

いまさらDocker入門
はじめにいまさらながらDockerについてまとめてみました。なるべく動かしながらDockerを理解していきたいと思います。DockerとはDockerとは、コンテナを活用した開発・運用を可能にするソフトウェアです。コンテナを使えるツールとい...
Docker Composeについては下記を参考にしてください。

【超基礎】Docker Compose
はじめにDockerComposeについて、基本的な使い方の解説と具体的な例としてDjango/PostgreSQLアプリを構築をしてみたいと思います。Dockerについてはこちらで解説しています。環境DocerとDockerCompose...
Next.jsアプリ作成
まずはNext.jsのアプリを作成します。
試しにNext.jsの公式リポジトリからサンプルアプリを作成してみます。
npx create-next-app sample-app-blog --use-npm --example https://github.com/vercel/next.js/tree/canary/examples/blog
アプリを作成するとこのようなディレクトリ構成になります。
.
└── sample-app-blog
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
├── scripts
├── styles
└── theme.config.js
アプリの作成についてはこちらを参考にしてください。

【Next.js初めの一歩】アプリを作成する
はじめにNext.jsでアプリを作成する方法を紹介します。Next.jsでアプリ作成手動で作成することもできますが、create-next-appを利用して自動でアプリを作成することが推奨されています。npmでアプリを作成するには以下のよう...
Dockerfile作成
次にNext.jsアプリを実行するコンテナイメージの元となるDockerfile
を作成します。
nodeの公式イメージを利用して、パッケージのインストールをします。
FROM node:14.17.4-alpine
WORKDIR /usr/src/app/next
COPY /sample-app-blog/package*.json ./
RUN npm install
node - Official Image | Docker Hub
Node.jsisaJavaScript-basedplatformforserver-sideandnetworkingapplications.
docker-compose.yml作成
続いて、docker-compose.yml
を作成します。
version: "3"
services:
nextjs:
build: .
ports:
- "3000:3000"
container_name: nextjs-app
volumes:
- ./sample-app-blog:/usr/src/app/next
command: npm run dev
最終的に以下のようなディレクトリ構成になります。
.
├── Dockerfile
├── docker-compose.yml
└── sample-app-blog
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
├── scripts
├── styles
└── theme.config.js
コンテナ実行
必要なファイルの準備が完了したので、コンテナを実行します。
docker-compose up -d
localhost:3000
にアクセスするとアプリを確認することができます。
コンテナの実行を停止する場合は以下のコマンドを利用します。
docker-compose down