Dockerfile

Dockerfileは、コンテナ内で必要なパッケージや環境を設定し、Next.jsアプリケーションを実行できる環境を構築します。

//Node.jsの軽量イメージをベースに使用
FROM node:20-slim

//タイムゾーンの設定
ENV TZ=Asia/Tokyo

//作業ディレクトリを設定
WORKDIR /app

//package.jsonとpackage-lock.jsonをコピーして依存関係をインストール
COPY package*.json ./
RUN apt-get update &&
apt-get install -y bash &&
npm install &&
apt-get clean &&
rm -rf /var/lib/apt/lists/*

//アプリケーションのソースコードをコピー
COPY . .

Next.jsサーバーのポートを公開¶

EXPOSE 3000

//開発サーバーを起動
CMD ["npm", "run", "dev"]
4. docker-compose.yml

docker-compose.ymlファイルは、複数のサービス（ここではfrontendサービス）の設定をまとめて管理します。

version: "3.9"

services:
frontend:
build: .
volumes:
- .:/app:cached # ホストのプロジェクトディレクトリをコンテナ内の/appにマウント
- /app/node_modules # node_modulesをコンテナ内でのみ管理
ports:
- "3000:3000" # Next.jsのデフォルトポート3000を公開
tty: true
command: npm run dev # サーバーを起動
networks:
landing-page_network:
external: true
実行手順
Dockerイメージのビルド
以下のコマンドでDockerイメージをビルドします。

docker-compose up --build
これにより、イメージのビルドとコンテナの起動が一度に行われます。
ブラウザでアクセス
イメージのビルドとコンテナの起動が完了すると、ブラウザでhttp://localhost:3000にアクセスして、Next.jsアプリケーションが動作しているか確認できます。
コンテナ内での作業
コンテナ内でコマンドを実行したい場合、以下のコマンドでfrontendサービスのコンテナに入ることができます。

docker-compose exec frontend bash
コンテナ内で依存関係のインストールやNext.jsのコマンドを実行することが可能です。
コンテナの停止
作業が終了したら、以下のコマンドでコンテナを停止します。

docker-compose down
注意点
ボリューム設定: node_modulesをコンテナ内でのみ管理することで、ホストの依存関係とコンテナ内の依存関係が干渉しないようにしています。
タイムゾーンの設定: ENV TZ=Asia/Tokyoでタイムゾーンを日本に設定しています。
この手順でNext.jsアプリケーションをDocker内で構築し、コンテナ内での作業やアプリケーションの実行ができるようになります。

Dockerイメージ
Next.jsは、Dockerコンテナをサポートする任意のホスティングプロバイダーにデプロイできます。このアプローチは、Kubernetesのようなコンテナオーケストレーションを行う場合や、任意のクラウドプロバイダーでコンテナ内で実行する場合に使用できます。

あなたのマシンにDockerをインストールしてください
私たちの例をクローン（またはマルチ環境の例）
コンテナをビルドします：docker build -t nextjs-docker .
コンテナを実行します：docker run -p 3000:3000 nextjs-docker
Dockerを介したNext.jsはすべてのNext.js機能をサポートします。