導入

今回は最新のNext.jsを最も簡単にセットアップして動くようにするコードを用意したので軽い検証や初めてNextを使う方はぜひ使ってみてください！

必要なもの

これだけです！
初学者向けに今回はvscodeで説明していますがエディターはなんでもいいです

手順

gitが普通に使える方は以下のリポジトリからクローンしてREADME.md通りに構築してください

gitがよくわからない方は以下の手順で進めてください

適当な空のフォルダを開きます

2. `Dockerfile`, `Makefile`, `setup.sh` の3つのファイルを作成します

3. それぞれの中身は以下をコピペしてください

Dockerfile

FROM node:18-alpine
WORKDIR /usr/src/app
RUN npm install -g create-next-app

COPY setup.sh /setup.sh
RUN chmod +x /setup.sh

CMD ["/setup.sh"]

setup.sh

#!/bin/sh
PROJECT_DIR="/usr/src/app"

# 以下はproject作成後は消していい
if [ ! -f "$PROJECT_DIR/package.json" ]; then
  TMP_DIR=$(mktemp -d -t tmp-nextjs-XXXXXX | tr '[:upper:]' '[:lower:]')
  npx create-next-app@latest $TMP_DIR --use-npm --ts --eslint --src-dir
  mv $TMP_DIR/* $PROJECT_DIR
  mv $TMP_DIR/.[^.]* $PROJECT_DIR
  rm -rf $TMP_DIR
fi

echo "Starting Next.js development server..."
npm run dev

Makefile

CONTAINER_NAME=nextjs-container
IMAGE_NAME=nextjs-docker

build:
	docker build -t $(IMAGE_NAME) .
run:
	docker run --rm -it -p 3000:3000 -v $(PWD):/usr/src/app --name $(CONTAINER_NAME) $(IMAGE_NAME)
bash:
	docker exec -it $(CONTAINER_NAME) /bin/sh

4 . ターミナルを開いてください

5 . ターミナルに以下のコマンドを打ちます

make build

make run

最初に立ち上げる時はそこそこ時間がかかります。15分くらいかかったかも!

いくつか質問がされますがよくわからない方は全て適当にEnter押して大丈夫です。後から変更できるので
ターミナルが写真のようになった後、http://localhost:3000 にアクセスしてNextの画面が表示されれば成功です

コンテナに入りたい場合は

make bash

を使ってください

最後に

わからないことやエラーがあったらお気軽にコメントください！

ここから先は興味がある人のみ読んでください

なぜこの方法が「最も簡単」なの？

ホストにNodeやnpmが無くてもよく、それらのバージョンに左右されないからです
公式サイトの手順でNextを動かそうとすると

動かしたいバージョンのnodeをインストールする
インストールしたnodeのバージョンを設定する
node -v をするがなぜかバージョンが変わっていない
なんかごちゃごちゃしてpathを通す
やっと新しいバージョンのnodeのpathが通る
動かしたいバージョンのnpmをインストールする
インストールしたnpmのバージョンを設定する
npm -vするがなぜかバージョンが変わっていない
以下略

こんなことが起きて普通のエンジニアでも1~2時間手こずることがあります
初学者だとここで挫折してもおかしく無いです
だからこそ初学者こそDockerを使うべきだと私は考えており、初学者がDockerのことをよく知らなくても簡単に動かせるようなコードを今回作成しました