初級② ページを増やして、部品に分ける

今日は、無料講座の「React」「Next.js」の回で学んだことを実物にします。ページを増やす（ルーティング）と、画面を部品（コンポーネント）に分ける——この2つは、本物のアプリ作りの背骨です。

STEP1：ページを増やす（フォルダ＝URL）

app/about/page.tsx を作って、自己紹介ページにして。トップページから「About」へのリンクも付けて。mainに反映して。

反映されたら、公開URLの後ろに /about を付けて開いてみてください。app/about/page.tsx というファイルを置いただけで /about というページが生まれる——これがNext.jsの回で学んだ「ファイルを置くだけでページができる」の実物です。

STEP2：共通ヘッダーを“部品”にする

全ページ共通のヘッダーを作りたい。サイト名と、トップ／Aboutへのリンクが入ったヘッダーをコンポーネント（components/Header.tsx）として作って、layout.tsx で全ページに表示して。mainに反映して。

トップにも /about にも、同じヘッダーが出るようになったはず。ヘッダーの“設計図”は1つだけで、それを全ページが使い回しています。

STEP3：「1つ直せば、全部変わる」を目撃する

ヘッダーのサイト名の前に 🌟 を付けて。mainに反映して。

公開URLでトップと /about を見比べてください。両方のページが一度に変わりました。直したのは部品1か所だけ。これがReactの回で学んだ「部品化の威力」です。ページが100枚あっても、直すのは1か所。

STEP4：部品を“使い回す”

「好きなもの」を紹介するカードのコンポーネントを作って、トップページに3枚並べて。カードはタイトルとひとこと説明が入るシンプルなデザインで。スマホでは縦に、PCでは横に並ぶように。mainに反映して。

できあがったら、GitHubでコードも覗いてみましょう。同じカード部品が、中身（タイトルや説明）だけ変えて3回使われているのが見えるはず。

おさらい：今日使った“言葉”

ルーティング

URLとページの対応。Next.jsでは「app/フォルダ名/page.tsx」を置くだけ。

コンポーネント

画面の“部品”。1つ直せば、使っている場所すべてに反映。

layout.tsx

全ページ共通の枠。ヘッダーやフッターの定位置。

使い回し

同じ部品に違う中身を渡して何度も使うこと。