ステップ1：Node.js のインストール確認
Next.js を動かすには，サーバーサイドで JavaScript を実行するための環境「Node.js」が必要．
- ターミナル（PowerShell や Mac のターミナル）を開く．
- 以下のコマンドを入力して，バージョンが表示されるか確認する．
node -v
- 表示された場合： そのまま進む．
- エラーや古い場合： Node.js 公式サイトから「LTS（推奨版）」をインストールする．
ステップ2：プロジェクトの新規作成
次に，Next.js のテンプレート一式を自動生成する．
- プロジェクトを作りたいフォルダに移動し，以下のコマンドを実行．（今回は
prototype-siteで作成）
npx create-next-app@latest prototype-site
いくつか質問が表示されるので，標準的な設定としてすべて「Yes (Enter)」で進める．
ステップ3：フォルダ構成の理解
先ほど作成された prototype-site フォルダをテキストエディタで開く．
HTML/CSSなどとの対応関係は以下の通り．
-
app/page.tsx：
index.htmlに相当する．ここにページの構造を書く． -
app/layout.tsx：
全ページ共通の枠組み（ヘッダーやフッター，フォント設定など）を書く場所． -
app/globals.css：
style.cssに相当する．サイト全体に適用するスタイルを書く． -
public/フォルダ：
画像などの静止ファイルを置く場所．
ステップ4：ローカル開発サーバーの起動
自分の PC 上でサイトを動かしてみる．
- ターミナルでプロジェクトのフォルダに移動．
cd prototype-site
2.サーバーを起動．
npm run dev
3.ブラウザで http://localhost:3000 を開く．Next.js の初期画面が表示されれば成功．
ステップ5：ここから開発
保存すると，ブラウザがリロードなしで更新されるはず．