Next.js のチュートリアル（App Router）を Docker で試せるようにしました！

はじめに

React に取り組んでいるので Next.js もやってみようと、チュートリアルに手を出してみました。
その際、Next.js のチュートリアルを Docker で試せるようにしたので、他に使いたい人が少しはいるかも？と思って、作った Docker のサンプルファイルを公開して、使い方の説明記事を書くことにしました。

サンプルの動作環境

Mac で動作確認しています。
（Mac だと、あえて Docker を使う必要はないかもしれませんが Docker だと不要になったら消しやすいので。WSL の場合、生成されたファイルを変更できないかもしれません。練習用に雑に対処するなら chmod 777 とか書き込めるようにすれば進められると思います。）

事前に Docker が使えるようにセットアップしておいてください。

Docker のサンプルファイルをダウンロード

Github にアップロードしてあります。
https://github.com/y74h1116/next_js_tutorial
今回は zip ファイルで取得することにしたので、「Code」→「Download ZIP」の順にクリックしました。

※サンプルに付属の README.md に起動方法を記載しているので、そちらでわかる人はそちらを見ていただいてもOK。

ダウンロードした zip ファイルを適当なディレクトリに配置

僕は、workspace というディレクトリを作って、そこに zip ファイルを置きました。

zip ファイルを展開解凍

ターミナルを起動して、zip ファイルを展開します。

$ cd  zipファイルを配置したディレクトリ
$ unzip  next_js_tutorial-main.zip

※下記は実際に unzip してみたところです。

Docker のビルド、コンテナの起動

zip を展開したディレクトリの中に docker-compose.yml があるはずです。
docker-compose.yml があるディレクトリに移動して docker compose up コマンドを実行します。

$ cd  next_js_tutorial-main
$ docker compose up

※下記は実際にコマンドを実行してみたところです。

別のタブを開いて、コンテナが起動したか状態を確認します。
Up 状態になっていればOKです。

※別のタブで実行
$ docker ps

※下記は実際にコマンドを実行してみたところです。

コンテナのシェルに入る（入るというかシェル起動）

シェルを起動します。

$ docker exec -it next_js_tutorial ash

※下記は実際にコマンドを実行してみたところです。

チュートリアル Chapter 1 を進める

ここまで進むとチュートリアルに取り組めます！

以下は App Router のチュートリアルのリンクです。
https://nextjs.org/learn/dashboard-app
「Start Chapter 1」をクリックして進めましょう。

npm install -g pnpm を最初に実行することになっていますが、
Dockerを起動する際に pnpm のインストールは済んでいます。
npx create-next-app@〜 からやっていきます。

$ npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

※下記は実際にコマンドを実行した例です。

※なにやら警告（以下）が出ていますね🤔

Warning
   Ignored build scripts: bcrypt, sharp.
   Run "pnpm approve-builds" to pick which dependencies should be allowed
   to run scripts.

bcrypt と sharp はそれぞれハッシュ処理とイメージ処理のモジュールみたい、、
それらを無視したってことですか、、
pnpm approve-builds で承認できるのかな。
チュートリアルでは pnpm approve-builds のことは言及されていないので
一旦実行しないけど、ハッシュ処理とイメージ処理に関係する箇所で動かないことがあったら再確認が必要そう。
（僕自身、まだ最後までチュートリアルできてないけど(汗)、後の方で影響あるのかどうか）

チュートリアルの指示どおりに順次、打ち込んでいきます。

$ cd nextjs-dashboard
$ pnpm i
$ pnpm dev

そして Webブラウザで http://localhost:3000 にアクセス。
無事、表示されました！

おわりに、、ではありません！

チュートリアルの内容を試せる環境を用意したので
ここからスタートです！