第11章：npx create-next-app@latest で作る🎉
この章のゴールはこれだよ〜！✨ Next.js の新規プロジェクトを、コマンド一発で“ひな形”として作れるようになること！💪😊
1) まずは作業場所を決めよ〜📁✨
例えばこんな感じがおすすめ👇（Windowsだとわかりやすい💕）
C:\dev\の中にプロジェクトを作る
エクスプローラーで C:\dev を作っておくと楽ちんだよ〜😆🧁
2) VS Code でターミナルを開くよ〜🖥️💖
VS Code を開いたら👇
- メニュー → ターミナル → 新しいターミナル
（ショートカット：Ctrl + @ でもOKなこと多いよ〜⚡）
3) Node.js のバージョンだけ確認✅🔎
Next.js の作成ツールは Node.js 20.9 以上が目安だよ〜🍀 （公式の要件に書いてあるよ）(Next.js)
ターミナルで👇
node -v
v20.9.0 以上ならOK🙆♀️✨
もし古かったら、Node.js を更新してから進もう〜🔁💡
4) いよいよ作る！🎉✨（基本コマンド）
C:\dev に移動してから、プロジェクト作成するよ〜！
cd C:\dev
npx create-next-app@latest my-app
my-appは好きな名前にしてOKだよ〜🫶（例：campus-notesとか📒✨）
作るときに「最新版入れていい？🙂」みたいに聞かれたら、だいたい👇でOK！
Ok to proceed? (y)→ y を押して Enter 🎯
これは create-next-app っていう公式CLIが、必要なものを入れてくれてる感じだよ〜🧰✨ (Next.js)
5) 質問がいっぱい出てきたら？🤔💭
作成中にいくつか質問（TypeScript使う？など）が出ることがあるよ〜！ ここは次の章で丁寧にやるけど、迷ったらいったん「おすすめ寄り」で進めても大丈夫🙆♀️🌸
ちなみに 質問をスキップして“だいたい標準セット”で作ることもできるよ👇
npx create-next-app@latest my-app --yes
この --yes は、保存済み設定 or デフォルトで一気に作ってくれるやつで、TypeScript / Tailwind / ESLint / App Router / Turbopack / import alias @/* が既定で有効になるよ〜🧁✨ (Next.js)
6) 作れたかチェック👀✅
作成が終わったら、フォルダができてるはず！🎊
cd my-app
そして VS Code でそのフォルダを開くなら👇どっちでもOK！
- エクスプローラーから
my-appを右クリック → Codeで開く - もしくは VS Code で「フォルダーを開く」📂✨
図解：create-next-app の流れ（ざっくり）🧠➡️🏗️
よくあるつまずき（この章で潰す🧯）😵💫➡️😆
✅ 1) node が古いって怒られる
→ Node.js を更新したらOK！✨（目安：20.9+）(Next.js)
✅ 2) Ok to proceed? が出て止まった
→ y を押して Enter だよ〜🎯
✅ 3) 会社/学校Wi-Fiで落ちる（たまにある😭）
→ いったん別回線（スマホテザリング等）で作って、あとで戻すのもアリ📶✨
ミニ練習🎮💗（3分でできる！）
次のどっちかで新規作成してみてね👇
-
A案：質問に答えながら作る
npx create-next-app@latest campus-notes -
B案：いったん標準セットでサクッと作る
npx create-next-app@latest campus-notes --yes
作れたら C:\dev\campus-notes が存在してたら勝ち〜🏆🎉
ふりかえり（超だいじ🫶✨）
今日できたことはこれ！✅
npx create-next-app@latestで Next.js の土台を生成できた🎉--yesで 標準セット生成もできるって知った✨ (Next.js)
ここまでできたら、次章で「質問の意味」をちゃんと理解して、迷わず選べるようにするよ〜😆💕