Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – 簡単なミニアプリ②

React Next.js
スポンサーリンク

ここで作る「Next.jsらしい」ミニアプリの全体像

ここまでで、
React の基本（コンポーネント・state・props・イベント）
Next.js の基本（ページ分割・Link・layout・Metadata・CSS・Image）
をそれぞれバラバラに見てきました。

ここでは、それらをまとめて

  • 複数ページを持つ
  • レイアウトが共通化されている
  • データをそれっぽく表示する

という、少し実践寄りのミニアプリを一気に作りながら、「Next.jsらしさ」を体に入れていきます。

テーマは「講座サイト風ミニアプリ」にしましょう。

  • ホームページ /
  • 講座一覧ページ /lessons
  • プロフィールページ /profile

という 3 ページ構成で考えます。

複数ページアプリの骨組みを作る

URLとファイルの対応をもう一度整理する

今回の構成はこうです。

  • / → app/page.tsx
  • /lessons → app/lessons/page.tsx
  • /profile → app/profile/page.tsx

この 3 つの page.tsx を用意すれば、「複数ページアプリ」の形になります。

ホームページの例

// app/page.tsx
import Link from "next/link";

export default function HomePage() {
  return (
    <main>
      <h1>Next.js × React 入門講座</h1>
      <p>このサイトでは、React と Next.js の基本を練習できます。</p>

      <section style={{ marginTop: "24px" }}>
        <h2>メニュー</h2>
        <p><Link href="/lessons">講座一覧を見る</Link></p>
        <p><Link href="/profile">講師プロフィール</Link></p>
      </section>
    </main>
  );
}
TSX

講座一覧ページの例（中身は後でちゃんと作る）

// app/lessons/page.tsx
export default function LessonsPage() {
  return (
    <main>
      <h1>講座一覧</h1>
      <p>ここに講座の一覧が表示されます。</p>
    </main>
  );
}
TSX

プロフィールページの例

// app/profile/page.tsx
export default function ProfilePage() {
  return (
    <main>
      <h1>講師プロフィール</h1>
      <p>名前：あなた</p>
      <p>紹介文：Next.js と React を勉強中です。</p>
    </main>
  );
}
TSX

この時点で、すでに

  • 複数ページが存在して
  • Link で行き来できる

という「Next.js の基本形」ができています。

レイアウト共通化で「サイト感」を出す

layout.tsx で共通ヘッダーとベースを作る

全ページ共通のヘッダーと、中央寄せのレイアウトを app/layout.tsx にまとめます。

// app/layout.tsx
import type { Metadata } from "next";
import Link from "next/link";
import "./globals.css";

export const metadata: Metadata = {
  title: "Next.js × React 入門ミニアプリ",
  description: "React と Next.js の基本を学ぶ練習用ミニアプリです。",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body style={{ margin: 0, fontFamily: "sans-serif", backgroundColor: "#f3f4f6" }}>
        <header
          style={{
            padding: "12px 24px",
            backgroundColor: "#111827",
            color: "white",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div style={{ fontWeight: "bold" }}>
            <Link href="/" style={{ color: "white", textDecoration: "none" }}>
              Next.js × React 入門
            </Link>
          </div>
          <nav style={{ display: "flex", gap: "16px", fontSize: "14px" }}>
            <Link href="/lessons">講座一覧</Link>
            <Link href="/profile">講師プロフィール</Link>
          </nav>
        </header>

        <main
          style={{
            maxWidth: "960px",
            margin: "0 auto",
            padding: "24px 16px 40px",
          }}
        >
          {children}
        </main>
      </body>
    </html>
  );
}
TSX

ここで重要なのは、

  • どのページでも同じヘッダーが表示される
  • main のレイアウトが全ページ共通になる

という点です。

各ページの page.tsx には「中身だけを書く」。
全体の枠組みやナビゲーションは layout.tsx が担当する。
この役割分担が、「Next.jsらしい」レイアウト設計です。

データ表示で「講座一覧」をそれっぽくする

ダミーデータを配列で持つ

講座一覧ページでは、配列データを map で表示していきます。
まずはシンプルなダミーデータから。

// app/lessons/page.tsx
const lessons = [
  {
    id: 1,
    title: "第1回：React の基本",
    description: "コンポーネント、JSX、props の基礎を学びます。",
    level: "初級",
  },
  {
    id: 2,
    title: "第2回：状態管理 useState",
    description: "state とイベント処理を使ったミニアプリを作ります。",
    level: "初級",
  },
  {
    id: 3,
    title: "第3回：Next.js のページ構成",
    description: "App Router、Link、layout の基本を理解します。",
    level: "中級",
  },
];
TSX

カード風のUIで表示する

この配列を map してカード風に描画します。

export default function LessonsPage() {
  return (
    <main>
      <h1>講座一覧</h1>
      <p>React と Next.js を順番に学べるレッスンです。</p>

      <section style={{ marginTop: "24px", display: "grid", gap: "16px" }}>
        {lessons.map((lesson) => (
          <article
            key={lesson.id}
            style={{
              backgroundColor: "white",
              padding: "16px 20px",
              borderRadius: "8px",
              boxShadow: "0 1px 3px rgba(15,23,42,0.08)",
            }}
          >
            <h2 style={{ margin: "0 0 8px", fontSize: "18px" }}>{lesson.title}</h2>
            <p style={{ margin: "0 0 8px", color: "#4b5563", fontSize: "14px" }}>
              {lesson.description}
            </p>
            <p
              style={{
                display: "inline-block",
                padding: "2px 8px",
                borderRadius: "9999px",
                backgroundColor: "#eff6ff",
                color: "#1d4ed8",
                fontSize: "12px",
              }}
            >
              レベル：{lesson.level}
            </p>
          </article>
        ))}
      </section>
    </main>
  );
}
TSX

ここで使っている要素を整理すると、

  • データは配列 lessons にまとめておく
  • map で 1 件ずつ article に変換
  • key={lesson.id} で React に「この要素はこのデータ」と知らせる
  • カード風のスタイルで「それっぽい一覧」に見せる

「Next.js らしさ」と「React 基本」が両方出ています。

実践力チェック：自分で説明できるか

ここまでのミニアプリで、実はすごく多くの要素を同時に使っています。
ざっと挙げるとこうです。

  • 複数ページ
    • app/page.tsx
    • app/lessons/page.tsx
    • app/profile/page.tsx
  • ページ遷移
    • Link で / / /lessons / /profile を行き来
  • レイアウト共通化
    • app/layout.tsx に共通ヘッダーとベースレイアウト
    • 各ページは children の中に差し込まれる中身だけを担当
  • データ表示
    • 配列を map して一覧表示
    • key の付け方
  • 最低限のデザイン
    • 背景グレー＋白いカード
    • ヘッダーのナビゲーション

ここで一度、自分の頭の中でこんな問いに答えてみてください。

  • 「/lessons を開くとき、Next.js はどのファイルを読む？」
  • 「layout.tsx のどこに各ページの中身が入る？」
  • 「講座一覧のカードは、どのデータをどうやって画面に変換している？」
  • 「なぜ key={lesson.id} を書いている？」

これに自分の言葉で答えられるようなら、
もう「Next.js × React の入門レベル」はしっかりクリアできています。

次のステップのための問いかけ

ここまで作ったミニアプリに、もし機能を足すとしたら、何を付け足してみたいですか。

例えば、

  • 「レベル」で絞り込みできるフィルタ
  • レッスンの詳細ページ（/lessons/1 のような動的ルーティング）
  • ログインしているかどうかで表示を変える

どれを選んでも、今まで学んだ要素の延長線上で作れます。

スポンサーリンク
タイトルとURLをコピーしました