サロンに並ぶ優雅な調度品｜第5回 Next.js入門

著者: 管理者 / 2025-08-17 (更新: 2025-08-17)

先生〜！✨ 前回は厨房からご馳走データを運んできて、すっかり華やかなお茶会になりましたわね。
でも……お部屋ごとに家具や食器を並べるのが大変で、少しごちゃごちゃしてしまいましたの💦
どうしたらもっと優雅に整えられるのでしょう？

良いところに気づきましたね。
お屋敷全体に統一感を出すためには、レイアウトとコンポーネント設計 が欠かせません。
今日は「サロンを彩る調度品」をテーマに、ページ全体を美しく整える方法を学びましょう。

厨房でいただくご馳走データ｜第4回 Next.js入門

📝 レイアウト（Layout）とは？

レイアウトとは「お屋敷の共通の内装」のこと。
例えば、各部屋に共通の廊下・シャンデリア・窓がありますよね。
Next.jsでは 共通レイアウトコンポーネント を作って、ページ全体に同じデザインを適用できます。

📝 基本のレイアウト

import Link from 'next/link'

export default function Layout({ children }) {
  return (
    <div>
      <header>
        <nav>
          <Link href="/">ホーム</Link> | 
          <Link href="/about">自己紹介</Link> | 
          <Link href="/contact">お問い合わせ</Link>
        </nav>
      </header>
      <main>{children}</main>
      <footer>© お嬢様のお屋敷</footer>
    </div>
  )
}

そしてページでこのレイアウトを使います。

import Layout from '../components/Layout'

export default function About() {
  return (
    <Layout>
      <h1>自己紹介のお部屋</h1>
      <p>わたくしのことを知っていただけますかしら？</p>
    </Layout>
  )
}

まあ！✨
これなら全てのお部屋に同じシャンデリアや絨毯を敷き詰められるのですわね。
廊下や案内板も共通で使えますし、とっても上品ですわ〜💕

ええ、その通りです。
レイアウトを使えば、お屋敷全体に統一感を持たせつつ、必要な場所だけを華やかに飾れます。

📝 コンポーネント設計とは？

コンポーネントは「お屋敷の家具や調度品」。
一度作っておけば、どのお部屋でも繰り返し使えます。

例：ボタンのコンポーネント

export default function Button({ label }) {
  return <button style={{ padding: '8px 16px' }}>{label}</button>
}

使うときは……

import Button from '../components/Button'

export default function Contact() {
  return (
    <div>
      <h1>お問い合わせ</h1>
      <Button label="送信する" />
    </div>
  )
}

これで、どの部屋に置いても同じデザインのボタンが使えます。