はじめに

タイトルにある通り、DockerによるNext.jsの環境構築の手順を記載しています。
様々な方の記事も拝読させていただきましたが、create-next-appをルートに展開している例が見つからなかったため、投稿させていただきました。
ルートに展開した理由としましては、heroku等にデプロイする際にpackage.jsonがルートにないと正常にデプロイが完了しないことや、ツリー構造が分かりづらくなるといった観点からです。
しかしながら、苦し紛れな実装になっているため、お詳しい方はコメントでお知らせください。

Dockerfileの作成

Dockerfile

FROM node:17.6.0

WORKDIR /usr/src/app

RUN npm install -g npm@latest && npm install create-next-app

上記のDockerfileにより実行されるのは、下記の3点です。

公式のnodeイメージを使用
作業ディレクトリを定義
create-next-appをインストール

docker-compose.ymlの作成

docker-compose.yml

version: "3.9"
services:
  app:
    build: .
    volumes:
      - .:/usr/src/app
    ports:
      - "3000:3000"
    command: bash -c "npm run dev"

docker-compose.ymlでは下記を実行します。

先ほどのDockerfileを参照
Next.jsアプリケーションを展開するディレクトリにマウントを作成
create-next-appのデフォルトのポートに接続
開発モードでの起動

環境構築

初めに、イメージのビルドを行います。

terminal

docker-compose build

次に、create-next-appによりNext.jsアプリケーションを作成します。
展開用のディレクトリにルートを指定すると、Dockerfileとdocker-compose.ymlによりコンフリクトが発生するため、
ここでは一時的にtmpディレクトリに作成し、ルートへ移動しています。

terminal

docker-compose run --rm app npx create-next-app tmp --ts\
&& mv tmp/* . && mv tmp/.* . && rm -r tmp

補足
--tsはTypescriptでのNext.jsアプリケーションの作成を指定しています。Javascriptでの開発を希望される方は、省略してください。

最後に、コンテナを起動します。

terminal

docker-compose up

http://localhost:3000が正常に起動していれば成功です。
参考までに、本記事の内容のGithubリポジトリも掲載いたしますので、必要な方はご覧ください。