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

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

この課題のねらい

ここまで学んできた内容をぜんぶつないで「小さな Next.js アプリ」を完成させるステップです。
特に意識してほしいのは次の2点です。

複数ページ（URL）があるアプリを、自分で構成できること
レイアウト・CSS・Link を使って「それっぽい見た目」に一段引き上げること

“教材の断片を触っている” 状態から、“自分のアプリを作っている” 感覚に変わるところです。

アプリ全体像をまずイメージする

どんな複数ページ構成にするか決める

ミニアプリ②では、まず「ページ構成」を決めるところから始めます。
例として、こんな 3 ページ構成にしてみましょう。

ホーム /
講座一覧 /lessons
このサイトについて /about

もちろん、自分で「プロフィール」「お問い合わせ」などを足してもOKです。
大事なのは、

URL ごとに page.tsx を作る
ナビゲーションからそれぞれのページに移動できる

この2つをちゃんと押さえることです。

必須課題① 複数ページ構成アプリ完成

ページファイルを用意する

まず、フォルダ構成をこのイメージで作っていきます。

app
├ page.tsx （ホーム）
├ lessons
│ └ page.tsx （講座一覧）
└ about
└ page.tsx （このサイトについて）

それぞれの中身をシンプルに書いてみましょう。

ホーム /

// app/page.tsx
export default function HomePage() {
  return (
    <>
      <h1>Next.js × React 入門ミニアプリ</h1>
      <p>このサイトは、講座の学習用ミニアプリです。</p>
      <p>ナビゲーションから各ページに移動してみてください。</p>
    </>
  );
}
TSX

講座一覧 /lessons

// app/lessons/page.tsx
const lessons = [
  "Reactの基本",
  "Next.js のページとルーティング",
  "useState とイベント処理",
];

export default function LessonsPage() {
  return (
    <>
      <h1>講座一覧</h1>
      <p>現在受講できるレッスンの一覧です。</p>

      <ul style={{ marginTop: "12px" }}>
        {lessons.map((title) => (
          <li key={title}>{title}</li>
        ))}
      </ul>
    </>
  );
}
TSX

このサイトについて /about

// app/about/page.tsx
export default function AboutPage() {
  return (
    <>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座用のサンプルアプリです。</p>
      <p>複数ページ構成やナビゲーションの練習を目的としています。</p>
    </>
  );
}
TSX

この時点で、

ブラウザから / /lessons /about を直接叩くと
それぞれ違うページが表示される

という状態になっていればOKです。

layout.tsxで共通レイアウトとナビゲーション

次に、「複数ページをつなぐ共通レイアウト」を作ります。
app/layout.tsx にヘッダーとナビゲーションを書きます。

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

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja">
      <body
        style={{
          margin: 0,
          fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
          backgroundColor: "#f9fafb",
        }}
      >
        <header
          style={{
            padding: "12px 24px",
            borderBottom: "1px solid #e5e7eb",
            backgroundColor: "white",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div style={{ fontWeight: 700 }}>Next.js × React 入門</div>

          <nav style={{ display: "flex", gap: "16px", fontSize: "14px" }}>
            <Link href="/">ホーム</Link>
            <Link href="/lessons">講座一覧</Link>
            <Link href="/about">このサイトについて</Link>
          </nav>
        </header>

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

これで、

どのページを開いても上に同じヘッダーとナビゲーション
main の中身だけが URL に応じて切り替わる

という、「複数ページ構成のミニアプリ」が完成します。

挑戦課題 デザインを少し整える

ここからは「ちょっとプロダクト感を出す」パートです。
全部やらなくてもいいので、できるところから取り入れてみてください。

ページタイトルとコンテンツをカード風にする

ホームページの見た目を少し整えてみましょう。
簡単なカードスタイルを当てるだけで、だいぶ印象が変わります。

// app/page.tsx
export default function HomePage() {
  return (
    <section
      style={{
        backgroundColor: "white",
        borderRadius: "12px",
        padding: "24px 20px",
        boxShadow: "0 10px 15px rgba(15, 23, 42, 0.08)",
        border: "1px solid #e5e7eb",
      }}
    >
      <h1 style={{ fontSize: "24px", marginBottom: "8px" }}>
        Next.js × React 入門ミニアプリ
      </h1>
      <p style={{ marginBottom: "4px" }}>
        このサイトは、Next.js と React の学習用サンプルアプリです。
      </p>
      <p style={{ color: "#6b7280", fontSize: "14px" }}>
        上部のナビゲーションから、講座一覧やサイトの説明ページに移動できます。
      </p>
    </section>
  );
}
TSX

「カードっぽさ」を出しているのは、

白背景
角丸（borderRadius）
薄い影（boxShadow）
薄い枠線

の組み合わせです。これは他のページにもそのまま応用できます。

講座一覧にちょっとした装飾を入れる

一覧ページも少しだけ整えます。

// app/lessons/page.tsx
const lessons = [
  "Reactの基本",
  "Next.js のページとルーティング",
  "useState とイベント処理",
];

export default function LessonsPage() {
  return (
    <section
      style={{
        backgroundColor: "white",
        borderRadius: "12px",
        padding: "24px 20px",
        boxShadow: "0 10px 15px rgba(15, 23, 42, 0.08)",
        border: "1px solid #e5e7eb",
      }}
    >
      <h1 style={{ fontSize: "22px", marginBottom: "8px" }}>講座一覧</h1>
      <p style={{ color: "#6b7280", fontSize: "14px", marginBottom: "12px" }}>
        現在受講できるレッスンの一覧です。
      </p>

      <ul style={{ margin: 0, paddingLeft: "20px" }}>
        {lessons.map((title) => (
          <li
            key={title}
            style={{
              padding: "4px 0",
            }}
          >
            {title}
          </li>
        ))}
      </ul>
    </section>
  );
}
TSX

これで、

アプリ全体に「共通の背景色」
各ページに「白いカード」
ヘッダーに「サイトタイトル＋ナビ」

がそろって、「ミニアプリ」としてそれなりの顔つきになります。

余力があれば：CSS Modules への移行

今はインラインスタイルで説明しましたが、
ここまでの CSS Modules の内容を踏まえて、

カード部分を Card.module.css に切り出す
共通のカードコンポーネント <Card>...</Card> を作る

といった整理もできます。

たとえば Card コンポーネントを作ると、

// app/components/Card.tsx
import type { ReactNode } from "react";

type CardProps = {
  children: ReactNode;
};

export function Card({ children }: CardProps) {
  return (
    <section
      style={{
        backgroundColor: "white",
        borderRadius: "12px",
        padding: "24px 20px",
        boxShadow: "0 10px 15px rgba(15, 23, 42, 0.08)",
        border: "1px solid #e5e7eb",
      }}
    >
      {children}
    </section>
  );
}
TSX

これを各ページで使えば、

<Card>
  <h1>…</h1>
  <p>…</p>
</Card>
TSX

のように、「デザインの共通化」と「コードの整理」が同時に進みます。

まとめ：ミニアプリ②でつかんでほしいこと

このミニアプリで身につけてほしいのは、次の感覚です。

URL ごとに page.tsx を作り、複数ページ構成のアプリを自分で設計できる
layout.tsx でヘッダーと共通レイアウトを定義し、「サイト全体の顔」を作れる
少しだけデザインを整えるだけで、“教材” から “アプリ” に雰囲気が変わる

ここまで来ていれば、
「Next.js のチュートリアルをやった人」ではなく、
「小さな Next.js アプリを自分で設計して作れる人」の側にもう片足突っ込んでいます。

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