頭の中ではうまくいっている実装でも、実際に動かしてみるとエラーになったり
予期しない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すれば動きます。
2.Nodeのバージョンを固定する
正直個人ではあまり必要がないが、実務でプロジェクトを作るときの練習。
また、自分の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周りの設定を行う。