Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – フォルダ構造

この課題のねらい
必須課題① app/page.tsx を編集して文字を表示
1. どのファイルがトップページなのかを確認する
2. 実際に文字を変えてみる
必須課題② URLとファイルの関係を説明する
1. まずはトップページの関係を自分の言葉で
2. フォルダとURLの「対応ルール」をイメージでつかむ
挑戦課題：新しいページを1つ作成する
1. 例として /about ページを作ってみる
2. さらに一歩：トップページからリンクしてみる
まとめと、この課題の“本当の意味”

この課題のねらい

この演習は「Next.js のフォルダ構造が頭の中でつながっているか」を確認するためのものです。
特に大事なのは、

app/page.tsx を触って「ここがトップページなんだ」と実感すること
「URL とファイルの場所の対応関係」を、自分の言葉で説明できるようになること
自分で新しいページファイルを作って、URL を増やせる実感を持つこと

です。ここが分かると、「ルーティングって難しそう…」が一気に薄まります。

必須課題① app/page.tsx を編集して文字を表示

どのファイルがトップページなのかを確認する

Next.js（App Router）では、

app/page.tsx が /（ルート、トップページ）

に対応しています。

プロジェクトフォルダの中を見て、

app フォルダ
その中の page.tsx

を探してください。これが「トップページのコンポーネント」です。

実際に文字を変えてみる

初期状態だと、page.tsx にはテンプレートのコードがけっこう入っています。
最初はそれを一回全部消して、超シンプルなコンポーネントにしてみましょう。

// app/page.tsx

export default function HomePage() {
  return (
    <main>
      <h1>Next.js × React 入門講座</h1>
      <p>これは app/page.tsx を編集して表示したテキストです。</p>
    </main>
  );
}

// app/page.tsx

export default function HomePage() {
  return (
    <main>
      <h1>Next.js × React 入門講座</h1>
      <p>これは app/page.tsx を編集して表示したテキストです。</p>
    </main>
  );
}

TSX

そして、

ターミナルで npm run dev（または yarn dev / pnpm dev）を実行
ブラウザで http://localhost:3000 を開く

と、さっき書いた h1 と p のテキストが表示されるはずです。

ここで感じてほしいのは、

「app/page.tsx を変えると、 / の画面が変わる」

という“つながり”です。これが Next.js の基本ルールになっています。

必須課題② URLとファイルの関係を説明する

まずはトップページの関係を自分の言葉で

今やったことを、そのまま日本語にしてみましょう。

例としては、こんな感じで説明できます。

app/page.tsx は http://localhost:3000/（トップページ）の中身を担当している
このファイルを編集すると、トップページの表示内容が変わる

自分でノートに書くなら、さらに一歩だけ踏み込んで、

app フォルダ直下の page.tsx → URL /
app/◯◯/page.tsx → URL /◯◯

というルールもセットで覚えておくと、次の課題が楽になります。

フォルダとURLの「対応ルール」をイメージでつかむ

App Router の基本ルールは、とてもシンプルです。

app/page.tsx → /
app/profile/page.tsx → /profile
app/about/page.tsx → /about

このように、

app の「下のフォルダ構造」＝「URLのパス」
そのフォルダの中の page.tsx ＝「そのURLにアクセスしたときの画面」

という対応になっています。

ここが腹に落ちると、

「新しいページを作る＝新しいフォルダ＋page.tsx を作る」

という発想が自然に出てくるようになります。

挑戦課題：新しいページを1つ作成する

例として /about ページを作ってみる

実際に、新しいページを増やしてみましょう。
ここでは例として「このサイトについて」の /about ページを作ります。

やることは 2 ステップです。

1つ目に、app/about フォルダを作る
2つ目に、その中に page.tsx を作る

ファイル構成としては、こうなります。

app/
- page.tsx ← /
- about/
  - page.tsx ← /about

app/about/page.tsx には、こんなコードを書いてみましょう。

// app/about/page.tsx

export default function AboutPage() {
  return (
    <main>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>
      <p>学習用に、複数ページ構成のミニアプリを作っています。</p>
    </main>
  );
}

// app/about/page.tsx

export default function AboutPage() {
  return (
    <main>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>
      <p>学習用に、複数ページ構成のミニアプリを作っています。</p>
    </main>
  );
}

TSX

そしてブラウザで、

http://localhost:3000/about

にアクセスすると、このページが表示されるはずです。

これで、

「フォルダを1つ作って、その中に page.tsx を置けば、新しいURLが作れる」

という Next.js のルーティングルールを、自分の手で体感できたことになります。

さらに一歩：トップページからリンクしてみる

せっかくなので、トップページから /about へリンクも貼ってみましょう。

app/page.tsx を少しだけ編集します。

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

export default function HomePage() {
  return (
    <main>
      <h1>Next.js × React 入門講座</h1>
      <p>これは app/page.tsx を編集して表示したテキストです。</p>

      <p>
        <Link href="/about">このサイトについて</Link>
      </p>
    </main>
  );
}

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

export default function HomePage() {
  return (
    <main>
      <h1>Next.js × React 入門講座</h1>
      <p>これは app/page.tsx を編集して表示したテキストです。</p>

      <p>
        <Link href="/about">このサイトについて</Link>
      </p>
    </main>
  );
}