【第18回】AIが最初に提案してくる土台に乗る｜Next.js を動かす（嫁子が教えるTS講座）

今回のゴール

• Next.jsのプロジェクトを作って、ブラウザに表示できる
• 大量に生成されるファイルのうち、最初に見るのは3つだと分かる
• ページを1枚増やせる

前回（フレームワークが要る理由）の続きです。今回は手を動かします。全体の流れは講座の目次へ。

嫁子: 今日いちばん伝えたいのは、生成されたファイルを全部理解しようとしないでってこと。

初めて作ると20個くらいファイルが出てくるの。でも最初に触るのは3つだけだよ。残りは「そういう部品がある」で通り過ぎていい。

全部分かってから進もうとすると、ここで止まるからね。

① プロジェクトを作る

作業したい場所で、次のコマンドを打ちます。

npx create-next-app@latest my-app

my-app は好きな名前で構いません（英数字とハイフンのみ。アンダースコアで始まる名前は弾かれます）。

打つといくつか質問されます。バージョンによって項目が増減しますが、この講座では次の方針で答えてください。

質問文はバージョンで変わるので、文言ではなく意味で合わせてください。

インストールが終わったら、そのフォルダに入って起動します。

cd my-app
npm run dev

http://localhost:3000 をブラウザで開くと、初期ページが表示されます。ここまで来れば土台は完成です。

嫁子: create-next-app は、必要なものを全部そろえてくれる道具だよ。

第15回でやった tsc --init みたいな設定も、Tailwindの準備も、全部済んだ状態で渡してくれるの。だから自分で組み立てなくていい。

② 最初に見る3つのファイル

生成物のうち、当面触るのはこれだけです。

試しに app/page.tsx の中身を全部消して、こう書いてください。

export default function Home() {
  return <h1>買い物メモ</h1>;
}

保存すると、ブラウザが自動で更新されます。再読み込みも再起動も要りません。これは開発中だけの仕組みで、保存のたびに変更部分を差し替えてくれます。

残りのファイル（next.config.ts、postcss.config.mjs、eslint.config.mjs、public/ など）は、必要になるまで開かなくて大丈夫です。

嫁子: 保存した瞬間に画面が変わるの、最初は感動すると思う。

でもこれ、開発中だけの機能だからね。本番では毎回ビルドし直す。そこは第28回で出てくるよ。

③ ページを増やす

Next.jsでは、フォルダの構造がそのままURLになります。

app/about/page.tsx というファイルを作って、こう書きます。

export default function About() {
  return <h1>このサイトについて</h1>;
}

これで http://localhost:3000/about が開けるようになります。設定ファイルへの登録は要りません。

ファイル名は必ず page.tsx です。フォルダ名がURLになり、その中の page.tsx が中身になります。

ページ間の移動には専用のタグを使います。

import Link from "next/link";

export default function Home() {
  return (
    <>
      <h1>買い物メモ</h1>
      <Link href="/about">このサイトについて</Link>
    </>
  );
}

<a href="..."> でも移動はできますが、その場合ページ全体を読み込み直します。Link を使うと必要な部分だけ差し替わるので、切り替えが速くなります。

④ バージョンの話（読み飛ばし可）

参考までに、この回を書いた時点（2026年8月）で create-next-app@latest が入れてくれたのは次のものでした。

あなたが試すときには、もっと新しくなっているはずです。数字が違っても、この回でやることは変わりません。

ただし、ネットの古い記事とは手順が食い違うことがあります。公式の手順と食い違ったら、公式を優先してください。

嫁子: 古い記事に当たったかどうかは、バージョンで見分けられるよ。

「pages ディレクトリ」「tailwind.config.js を作る」あたりが出てきたら、たぶん今の作り方とは違う世代の記事なの。AIも古い書き方を混ぜてくることがあるから、動かないときはバージョンを疑ってみて。

⑤ AIに頼むのは、この土台ができてから

第17回で「AIはNext.jsを前提に提案してくる」と書きました。順番として大事なのは、先に空のプロジェクトを作っておくことです。

土台があると、AIの仕事が「作文」から「編集」に変わります。

嫁子: これ、地味だけど効き目が大きいの。

ゼロから説明させると、環境の違いでうまくいかないことが増えるでしょ。動いている土台の上でお願いするほうが、成功率がずっと高いよ。

つまずきポイント

npm run dev を止めるときは、ターミナルで Ctrl + C です。開いたまま次の作業に進めるので、別のターミナルを開くと楽になります。

ポート3000が使われていると、別の番号で起動します。ターミナルに表示されたURLを見てください。

Windowsで npx が止まるときは npx.cmd。第15回と同じです。

今回のまとめ

• npx create-next-app@latest で土台を作り、npm run dev で起動する
• 最初に触るのは app/page.tsx / app/layout.tsx / app/globals.css の3つだけ
• フォルダ構造がURLになる。ファイル名は page.tsx、移動は Link
• 生成物を全部理解しようとしない
• 先に土台を作っておくと、AIの仕事が「作文」から「編集」に変わる

次にやること

次回はコンポーネントとPropsです。今日書いた page.tsx の中身を部品に切り分けて、AIに「この部品だけ直して」と言える形にしていきます。

今回の宿題：app/about/page.tsx を作って /about を表示させ、トップからの Link も置いてみてください。ファイルを置くだけでURLが増えるという感覚を、一度体験しておくのが目的です。

嫁子: 設定ファイルに何も書かなくていいの、最初は不安になると思う。

でもこれが「決まりに従えば動く」ってことなんだよね。その代わり、決まりから外れると急に難しくなるから、そこは覚えておいて。