頭の中ではうまくいっている実装でも、実際に動かしてみるとエラーになったり
予期しないWarningが発生することは多々ある。
その為、検証する環境を作っておく、またはすぐに作成できると便利だと思うので、
作業手順を備忘録の形で残しておく。

作業前の確認

Node.jsがインストールされていてnpx,npmのコマンドが実行できることを前提としている。
バージョン管理には、Voltaを使用。
エディタはVSCodeを使用。

1. まずはNext.jsのプロジェクトをWebページで表示する

好きな場所で以下コマンド実行して、プロジェクトの作成をする。
（コマンドの内容を知ることは大切だが、まずは動くものを作ることを重視）

npx create-next-app@latest --ts

最新の安定バージョンを取得するために、latestを指定。
また経験上、TypeScriptを使用しないプロジェクトはないので、--tsオプションも指定する。
（苦手でも必須になるので、必ずTypeScriptにして慣れること）

コマンドを実行すると質問が表示されるので、回答していく。
はじめての時はこれで戸惑うので、プロジェクトを作るときの回答例を載せておく。

気にするのはこれらの質問

What is your project named? ... // 作成するプロジェクトの名前のこと

What import alias would you like configured? // とりあえずEnterを押下

他の質問は気にせず回答例通りにして、Enterを押下する。
※複雑にしたくないので、App Routerは未導入にする

作ったプロジェクトに移動したら、以下コマンドを実行する

npm run dev

次の画像のように表示されるので、 http://localhost:3000にカーソルを合わせてCtrl + クリックをする。

このような画面が表示されれば、ここまでは成功

ここまでが難しい場合は、こちらからクローンしてみてください。
クローン後、npm installすれば動きます。

正直個人ではあまり必要がないが、実務でプロジェクトを作るときの練習。
また、自分のPCが複数台あり、それぞれのNodeのバージョンが違うことで予期しないエラーが起きるのを防ぐために設定してみる。
Voltaがインストールできていれば、プロジェクトディレクトリで以下のコマンドを実行して完了。

volta pin node@latest

package.jsonに次のような設定が追加される。(2024年10月時点)

"volta": {
    "node": "22.9.0"
  }

この記事では以下の作業を実施
1.create-next-appでのNext.jsのプロジェクト作成
2.VoltaでのNodeバージョン固定

最低限の環境構築②では、
フォーマットとLint周りの設定を行う。