Next.js構築 その③

Node.jsをインストール
Next.jsプロジェクトを作成
開発サーバーを起動

Node.jsをインストール

Node.jsは、Next.jsを動かすための基盤です。

Node.jsの公式サイトにアクセスします。
「Download Node.js(LTS)」と書かれたボタンをクリックしてインストーラーをダウンロード

3．ダウンロードしたインストーラーをクリックし、画面の指示に従ってインストールを進めます。
（※基本的にNextボタンをクリックしていけばOKです。）

4．「Finish」クリックでインストール完了

5．VScodeを開いて、「表示」→「ターミナル」でターミナルを表示します。

6．下記コマンドをターミナルで入力します。

node -v
npm -v

下記のようにバージョン情報が表示されたらインストール完了です。

Next.jsプロジェクトを作成

下記をターミナルで入力しデスクトップに移動します。

 cd .\Desktop\

下記コマンドを実行してNext.jsアプリを作成します。
「my-next-app」の部分はアプリ名なので任意で変更しても良いです。

npx create-next-app@latest my-next-app

途中でいくつか質問があります。
Ok to proceed? (y) y

√ Would you like to use TypeScript? … No / Yes　→ No
√ Would you like to use ESLint? … No / Yes　→ Yes（デフォルト）
√ Would you like to use Tailwind CSS? … No / Yes　→ Yes（デフォルト）
√ Would you like your code inside a src/ directory? … No / Yes　→ No（デフォルト）
√ Would you like to use App Router? (recommended) … No / Yes → Yes（デフォルト）
√ Would you like to use Turbopack for next dev? … No / Yes → No（デフォルト）
√ Would you like to customize the import alias (@/* by default)? … No / Yes → No（デフォルト）

今回はこのように設定しました。（TypescriptのみNoに変更、それ以外はデフォルト）

Success! Created my-next-app at C:\Users\user\Desktop\my-next-app

と出ていれば成功です。ここでエラーなどで進めない場合はターミナルのログを生成AIに貼り付けて指示に従って下さい。