開発環境構築の演習のねらい
この課題は「Next.js を使えるようになる」ための一番最初の関門です。
コードを書く前に、まずは
1つ目に、Next.js プロジェクトを自分の PC 上に作る
2つ目に、開発サーバーを起動してブラウザで表示する
3つ目に、そのためのコマンドを自分のメモとして残す
という流れを体験します。
ここを一度通っておくと、「いつでも自分で新しい Next.js プロジェクトを立ち上げられる」状態になります。
必須課題① Next.jsプロジェクトを作成する
create-next-app を使う流れ
前提として、Node.js と npm（または pnpm / yarn）がインストールされていることを想定します。
まだの場合は、Node.js を公式サイトから入れておいてください（LTS 版でOKです）。
Next.js プロジェクトを作る最も一般的な方法は、create-next-app を使うことです。
例として、プロジェクト名を my-next-app にしてみます。
1つ目に、ターミナル（またはコマンドプロンプト）を開きます。
2つ目に、プロジェクトを作りたいフォルダ（例: Documents など）に cd で移動します。
3つ目に、次のコマンドを実行します。
npx create-next-app@latest my-next-app
実行すると、いくつか質問（TypeScript を使うか、ESLint を使うかなど）が出ることがあります。
初心者のうちは、すべて Enter でデフォルトのまま進んでしまって構いません。
コマンドが終わると、my-next-app というフォルダの中に Next.js プロジェクトが一式作られます。
必須課題② localhost:3000 を表示する
開発サーバーを起動してブラウザで確認する
プロジェクトが作れたら、次は「動かす」番です。
1つ目に、ターミナルでプロジェクトフォルダに移動します。
cd my-next-app
2つ目に、開発サーバーを起動します。
npm run dev
（もし yarn を使うなら yarn dev、pnpm なら pnpm dev になります。）
コマンドが成功すると、ターミナルに
Ready on http://localhost:3000
のような表示が出ます。
3つ目に、ブラウザを開いて、アドレスバーに http://localhost:3000 と入力します。
Next.js の初期画面（Welcome 的なページ）が表示されれば成功です。
ここまでできたら、
Next.js プロジェクトを自分の PC に作る
開発サーバーを起動する
ブラウザで確認する
という一連の「基礎動作」をクリアしています。
必須課題③ 起動コマンドをメモする
「自分専用のチートシート」を作る感覚
毎回ググらなくてもいいように、自分の言葉でメモを残しておきましょう。
たとえば、メモ帳や Notion にこんな感じで書いておくと便利です。
例としては、次のような書き方が分かりやすいです。
「Next.js の開発サーバー起動コマンド」
- プロジェクトのフォルダに移動する
例:cd my-next-app - 開発サーバーを起動する
例:npm run dev（またはyarn dev/pnpm dev） - ブラウザで
http://localhost:3000にアクセスする
大事なのは、「未来の自分が見て一瞬で思い出せるかどうか」です。
教科書的にきれいに書く必要はありません。
自分の言葉で、「こうやればいい」と分かるメモになっていれば十分です。
挑戦課題 ポート番号を変更して起動してみる
3000番以外で立ち上げる理由と方法
通常、Next.js の開発サーバーは localhost:3000 で動きます。
しかし、すでに 3000 番ポートを別のアプリが使っている場合などは、番号を変える必要が出てきます。
例として、3001 番で起動したいとします。
1つ目に、いつもと同じようにプロジェクトフォルダに移動します。
cd my-next-app
2つ目に、ポート番号を指定して起動します。
npm を使っている場合の例です。
npm run dev -- -p 3001
-- の後に Next.js に渡したいオプション（ここでは -p 3001）を書きます。
yarn や pnpm でも同様に yarn dev -p 3001 や pnpm dev -p 3001 のように指定できます。
3つ目に、ブラウザで http://localhost:3001 を開きます。
先ほどと同じ Next.js の画面が表示されれば、ポート変更に成功しています。
ここまでできると、
決められた通りに動かすだけでなく
状況に応じて設定を少し変えて動かす
という「環境を自分でコントロールする感覚」が掴めてきます。
最後に：この課題をやるときの意識
開発環境の構築は、最初はどうしてもつまずきやすい部分です。
でも、ここを自力で何度か通過できるようになると、
新しいプロジェクトを次々に立ち上げて試せる
勉強会や記事のサンプルをすぐ自分の手で動かせる
という大きな自由を手に入れます。
もし途中でエラーが出たら、
エラーメッセージをしっかり読む
どのコマンドで止まったかをメモする
「ここまでできた／ここからできない」を区切る
この3つを意識しておくと、原因を特定しやすくなります。