2022年10月24日SHAREツイートシェアはてブLINEPocketちょっと最近フロント開発をする必要があり、サクッと動作確認するための環境をdockerで作れる準備をしようと思いました。過去reactの勉強をしていた経験もあり、SSR・SSGも簡単にできそうなnext.jsを選択しました。next.jsの初期環境構築の手順をまとめていこうと思います。本手順でうまくいかない、という場合はお手数ですがコメントいただけましたら確認しますのでよろしくお願いいたします。以下設定ファイルの内容です。nodeバージョンを指定しているのは作業時点でNode.jsの推奨版が16.13.2だったからです。以下から確認できますのでその時の推奨版にしていただけたら良いかと思います。Node.js↓こんな感じ。diniedが出て後続の作業がうまくできなくなるので入れてください。"3000:3000"上記「sample-app」の部分は作成するアプリケーションの名前にしていただけたらと思います。コンテナとアプリの作成ファイルを2つ作成できたら以下のコマンドを実行します。create-next-appがnext.jsのアプリケーションの作成コマンドです。sample-appここで先にdockerのコンテナを作成してから「sample-app」というディレクトリが作成されるはずです。ホットリロードの設定これであとはupするだけですが、docker環境の場合?このままだとホットリロードが効きません。※ホットリロードとはエディタで行った変更を自動で画面にも反映する機能です。その前にホットリロードの設定をしておきます。create-next-appで作成されたディレクトリ内に入り、中にある「next.config.js」を以下のように修正しましょう。},}これで起動時にホットリロードされるようになります。next.jsでホットリロードされないときの対処法サーバーの起動あとはサーバーの起動だけですので以下コマンドを実行してください。-dこれでnext.jsのデフォルトページが作成されるはずです。http:localhost:3000にアクセスしてみましょう。試しにpages/index.jsの内容を変更して画面を更新してみてください。画面更新をせずともそれが反映されていればホットリロードの設定もできています。お疲れ様でした!ハマったときに便利なコマンド上記の通りにやっていただけたら記事執筆時点ではスムーズにイケるはずです。実際はここまでくるのに結構苦労しました。何度かコンテナを削除したりしたので、そのときに何度も実行したコマンドもメモしておきます。--remove-orphansこれを実行すると一発でコンテナと関連するものをすべて削除します。以下参考にしましたが大変助かりました、ありがとうございます。Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド前にreactの環境構築をしていたときにも思ったのですが本当にフロントって開発環境の構築で躓くことが多いです...。うまくいった手順を残しておかないと不安になるので定期的に残しておこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。前の記事next.jsでホットリロードされないときの対処法プロフィールpythonとかgoとか書いたりしながら数字を見ている人です。システム開発とかデータ分析のこととか書きます(予定)。deniedが出たgit管理していないフォルダを後からリモートリポジトリに追加する方法G検定(2021#3)合格したので勉強方法など。便利?なエクセルあり。