Dev Study
← 解説「page.tsx — フォルダをページにする」に戻る

サンプルコードで身につける: page.tsx — フォルダをページにする

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1最小の page.tsx

ページとして成立する最小のコードです。コンポーネントを default export することだけが条件で、関数名は自由です。app 直下の page.tsx はトップページ「/」になります。

// app/page.tsx → サイトのトップページ「/」になる
export default function HomePage() {
  return <h1>こんにちは</h1>;
}

// 条件は2つだけ。
// 1. ファイル名が page.tsx であること
// 2. コンポーネントを default export していること
// 関数名(HomePage)は何でもよい。

2/about ページを作る

フォルダと page.tsx の組み合わせで特定の URL のページを作る、最も基本的な流れの例です。中身は普通の React コンポーネントなので、見出しや段落を自由に組み立てられます。

// app/about/page.tsx → /about ページ
export default function AboutPage() {
  return (
    <main>
      <h1>私たちについて</h1>
      <p>このサイトは Next.js の学習用に作られました。</p>
      <p>フォルダ + page.tsx の組み合わせでページが増えていきます。</p>
    </main>
  );
}

3page.tsx の有無で公開・非公開が決まる

「page.tsx を持つフォルダだけが URL として公開される」という規則を、実行できる形で再現した例です。部品置き場のフォルダが勝手にページにならない、というレッスン本文の安心ポイントを確かめられます。

TypeScript

4複数ページをまとめて作る

ページを増やすときは「フォルダ + page.tsx」を同じパターンで繰り返すだけ、という例です。料金ページと FAQ ページのように、サイトの定番ページはこの単純な繰り返しでどんどん追加できます。

// app/pricing/page.tsx → /pricing
export default function PricingPage() {
  return <h1>料金プラン</h1>;
}

// ─────────────────────────────
// app/faq/page.tsx → /faq
export default function FaqPage() {
  return <h1>よくある質問</h1>;
}

// どのページも作り方は同じ。
// 「フォルダを作って page.tsx を置く」の繰り返しでサイトが育つ。

5配列から一覧を表示するページ

実務のページは静的な文章だけでなく、データの一覧表示を含むことがほとんどです。page.tsx の中身は普通の React なので、配列を map で並べる定番パターンがそのまま使えることを示す例です。

// app/services/page.tsx → /services(提供サービス一覧)
const services = [
  { id: 1, title: "Web制作", price: "30万円〜" },
  { id: 2, title: "アプリ開発", price: "100万円〜" },
  { id: 3, title: "技術顧問", price: "月10万円〜" },
];

export default function ServicesPage() {
  return (
    <main>
      <h1>提供サービス</h1>
      <ul>
        {services.map((service) => (
          <li key={service.id}>
            {service.title} — {service.price}
          </li>
        ))}
      </ul>
    </main>
  );
}