アプリを作る
このページのゴール：ローカルで自分のNext.jsアプリが動いている
所要時間の目安: 30分動作確認日: 2026-08-05手順
1. 作業フォルダに移動する
ターミナルを開き、Phase 1で作った作業フォルダに入ります。
cd ~/dev
2. アプリのひな形を作る
Next.jsというアプリの土台一式を、1コマンドで生成します。
npx create-next-app@latest my-app
最初に Ok to proceed? (y) と出たら、そのままEnterを押します。
その後も英語の質問が数回続きます。全部そのままEnterで進めてOKです。おすすめの設定が自動で選ばれます。
生成には1〜5分ほどかかります。終わると my-app というフォルダができています。
3. アプリのフォルダに入る
cd my-app
4. アプリを起動する
npm run dev
これは「開発用サーバー」の起動です。動かしている間だけ、アプリが見られます。
止めたいときは Ctrl+C です。2-2でやった止め方と同じです。今は動かしたままにします。
5. ブラウザで見る
ブラウザで次のURLを開きます。
http://localhost:3000
Next.jsのスタート画面が出れば成功です。
この画面は、あなたのMacの中だけで動いています。まだ世界からは見えません。
6. Claude Codeに見た目を変えさせる
ひな形のままでは「自分の作品」ではありません。少しだけ変えます。
npm run dev は動かしたまま、新しいターミナルのウィンドウを開きます。⌘N で開けます。
cd ~/dev/my-app
claude
起動したら、こう頼みます。
トップページ（app/page.tsx）を編集してください。 大きな見出しで「はじめてのアプリ」と表示してください。 背景色も、やさしい色に変えてください。
Claudeがファイルを保存すると、ブラウザの画面が自動で切り替わります。
見出しの文言も色も、好きなだけ注文してかまいません。あなたの作品です。
✅ ここまで出来たらOK
確認すること：localhost:3000 に、自分が注文した見た目の画面が表示されている
そうならない場合 → エラー逆引きページ を見てください。
📖 出てきた言葉
Next.jsNext.js ／ ネクストジェイエス
Webアプリを作るための土台（フレームワーク）。画面表示・ページ分け・公開準備までの面倒事を引き受けてくれる。 次のページで使うVercelとの相性が良く、「公開」までが最短で済む。
ローカルlocal ／ ローカル
自分のパソコンの中のこと。「ローカルで動く」＝自分のMacの中だけで動いている状態。 順番はいつも「ローカルで動かす→本番に出す」。手元で動かないものは公開しても動かない。
localhostlocalhost ／ ローカルホスト
「自分のパソコン自身」を指す特別な住所。localhost:3000 は「自分のMacの3000番窓口」という意味。
このURLは世界からは見えない。だから壊しても誰にも迷惑がかからず、安心して実験できる。
localhost:3000 を開いても何も表示されない
npm run dev が動いているか確認してください。
ターミナルのウィンドウを閉じると、アプリも止まります。
その場合は cd ~/dev/my-app → npm run dev で、もう一度起動します。
「Port 3000 is in use」のような表示が出た
和訳：3000番はすでに使われています。
別のアプリが3000番窓口を使っているという意味です。
Next.jsは自動で3001番などに切り替えて起動します。
ターミナルに表示されたURL（例：http://localhost:3001）の方を開いてください。
Claudeに頼んだのに画面が変わらない
まず、ブラウザを手動で再読み込みしてください。
それでも変わらなければ、npm run dev 側のターミナルにエラーが出ていないか見ます。
エラーが出ていたら、全文をコピーしてClaudeに貼ってください（2-7の型）。