Next.jsの土台をCLIで作って起動する

このレッスンでは、AIツールの力を借りながら、Webサイトの「土台」をパソコンの中に作って、あなたのブラウザで表示させるところまで進めます。料理にたとえると、まな板と鍋を用意してお湯を沸かすところまで。まだ料理そのものは作りませんが、これがないと何も始まりません。所要時間は15分ほどです。

使う道具は Next.js（ネクストジェイエス） という、Webサイトを作るための人気の道具箱です。ChatGPTやCursorで「Webサイトを作って」と頼むと、だいたいこの道具箱を選んでくれます。つまり、AIと一緒に作業するなら避けて通れない共通言語です。

次の準備ができていることをまず確かめてください。前のレッスン「Node.jsとpnpmを準備する」で終わっていればOKです。

• パソコンの「ターミナル」（＝文字でパソコンに命令する黒い画面）を開けること
• node -v と打つとバージョン番号が表示されること
• pnpm -v と打つとバージョン番号が表示されること

どれか1つでも「コマンドが見つかりません」と言われたら、先に前のレッスンに戻ってください。

まずは、今日作るサイトの置き場所を決めます。デスクトップでも書類フォルダでも構いませんが、半角英数字だけのフォルダ名がおすすめです。

• 良い例: ~/projects、~/dev
• 悪い例: ~/デスクトップ/新しいフォルダ （日本語やスペースが入っているとエラーの原因になりやすい）

ターミナルでそのフォルダに移動しておいてください。移動の仕方がわからない場合は、ChatGPTに 「macOSのターミナルで ~/projects フォルダに移動するコマンドを教えて」 のように聞くのが一番早いです。

次の1行をターミナルに貼り付けて実行してください。

pnpm create next-app@latest my-first-site

このコマンドは、「Next.js の最新版で、my-first-site という名前の新しい土台を作って」 という意味です。my-first-site の部分は、好きな名前（半角英数字とハイフンだけ）に変えて構いません。

実行すると、いくつか質問されます。迷ったら次のように答えてください。

• TypeScript を使う？ → Yes（AIが書くコードと相性が良い）
• ESLint を使う？ → Yes（＝書き間違いを指摘してくれる仕組み）
• Tailwind CSS を使う？ → Yes（＝見た目を整える便利道具）
• src/ ディレクトリを使う？ → No（最初はシンプルに）
• App Router を使う？ → Yes（＝Next.jsの新しい標準的なやり方）
• import alias をカスタマイズする？ → No

わからなくなったら Enter キーを押すと「おすすめの答え」が選ばれる ので、焦らなくて大丈夫です。

1〜3分ほど、画面にいろいろな文字が流れます。最後に緑色で Success! のような表示が出れば完成です。

生成されたフォルダの中に入って、サイトを起動します。

cd my-first-site && pnpm dev

これは 「作ったフォルダに入って、開発用のサーバーを立ち上げて」 という意味です。cd は「change directory（フォルダを移動）」の略と覚えておけば十分です。

画面に Local: http://localhost:3000 のような行が出たら、ブラウザ（Chrome や Safari）を開いて http://localhost:3000 をアドレスバーに貼り付けてください。Next.js のロゴが表示されれば成功です。

停止したいときはターミナルに戻って Ctrl + C（Windowsでも Mac でも同じキー）を押します。

ここまでの作業で詰まったら、AIに次のように聞くと的確な答えが返ってきます。コピペして使ってください。

• ChatGPT / Claude に貼るプロンプト例:

  「macOSで pnpm create next-app@latest my-first-site を実行したら次のエラーが出ました。原因と解決方法を、プログラミング初心者向けに教えてください。エラーメッセージ: （ここにメッセージを貼る）」

• Cursor / Claude Code に頼む例（プロジェクト生成後に使えます）:

  「app/page.tsx のトップ画面の見出しを『はじめてのWebサイト』に変えて、その下に好きな自己紹介文を表示してください」

コツは エラーメッセージをそのまま貼る ことです。推測で言い換えず、英語のまま貼る方がAIは正確に答えてくれます。

• pnpm が見つからないと言われる: 前のレッスンの corepack enable が終わっていない可能性が高いです。ターミナルを一度閉じて開き直してみてください。
• ポート3000がすでに使われている: 別のアプリが同じ番号を使っています。pnpm dev を実行する代わりに、AIに「ポート3001で起動する方法」を聞けば1コマンドで教えてくれます。
• インストールの途中で止まって見える: ネットワーク待ちでほぼ全員が遭遇します。5分ほどは慌てず待つのが正解です。
• ブラウザで真っ白な画面: URLが http://localhost:3000 になっているか（https:// ではない）を確認してください。

次の3つがそろったら、このレッスンはクリアです。

1. my-first-site フォルダがパソコンの中にできている
2. pnpm dev を実行するとターミナルに Local: http://localhost:3000 の行が出る
3. ブラウザで http://localhost:3000 を開くと Next.js のトップ画面が表示される

スクリーンショットを1枚撮って、あなたの「はじめての土台」の記念にしてください。次のレッスンから、この土台の上に中身を作っていきます。