Next.jsドリル① 仕組みまるわかり

ReactドリルでReactの“部品”を体験しました。Next.jsは、そのReactを使って本物のWebサイトを組み立てる“全部入りキット”です。今日は手を動かす前に、仕組みを図解で総点検します（実際に動かすのはハンズオン初級編）。

その1：フォルダがそのままURLになる

Next.js最大の特徴。**app フォルダの中の構成が、そのままWebサイトのURL（住所）になります。 ファイルを置くだけでページが生まれる——これをルーティング**（道案内）と呼びます。

page.tsx という決まった名前のファイルが「このフォルダのページの中身」です。初級②で「/about を作って」と頼んだとき、AIが置いていたのは app/about/page.tsx。あれはこの仕組みだったんです。

その2：全ページ共通の“額縁”——layout.tsx

各ページの中身が page.tsx。それを囲む共通の枠（ヘッダー・フッターなど）が layout.tsx です。額縁を1つ直すと全ページに反映——初級②で体験した「1つ直せば全部変わる」の正体がこれです。

page.tsx

そのページだけの中身。

layout.tsx

全ページ共通の枠（ヘッダー／フッター）。

入れ子のlayout

フォルダごとにlayoutを置くと、その区画だけの共通枠も作れる。

その3：ページの中身は“Reactの部品”でできている

page.tsxの中身は、Reactドリルでやったコンポーネントそのもの。だからNext.jsの前にReactを触っておくと、すっと入れます。下は、Next.jsのトップページの中身に近いイメージ（Reactミニ環境で動かせます）。

function App() {
  return (
    <main>
      <h1>My App</h1>
      <p>ファイルを置くだけでページができる。</p>
    </main>
  );
}

実際のNext.jsでは function App() の代わりに export default function Page() と書きますが、「HTMLのようなものを返す関数がページになる」という芯はまったく同じです。

その4：サーバーとブラウザの“分担”

無料講座で学んだ「サーバー＝厨房、ブラウザ＝客席」。Next.jsの嬉しさは、どちらの仕事も同じプロジェクトに書けることです。

サーバー側（既定）

厨房。データベースから取る・秘密の鍵を使う“裏方”はここ。Next.jsでは何も付けなければこちら。

クライアント側（"use client"）

クリックや入力など“その場の反応”が要る画面は、ファイル先頭に "use client" と書く。

その5：作って→公開、の流れ

1. 1コードをGitHubに置く（保管庫）。
2. 2Vercelにつなぐ（公開ライン）。
3. 3mainに反映すると、Vercelが自動でビルド＆公開。
4. 4発行されたURLで、世界中から見られる。

この一連を、超初級ハンズオンでは1枚のHTMLで、初級ハンズオンではNext.jsで体験します。仕組みの地図は、これで完成です。

おさらい：今日の地図

ルーティング

appフォルダの構成＝URL。page.tsxがページの中身。

layout.tsx

全ページ共通の枠。1つ直せば全部変わる。

コンポーネント

ページの中身はReactの部品。

サーバー/クライアント

裏方は既定、反応が要る画面は "use client"。