1. Next.js App Routerとは何か

Next.js App Routerとは、Next.jsでページ構成を管理する新しい仕組みです。フォルダの構造が、そのままWebサイトのURL構造になります。たとえば、appフォルダの中にaboutというフォルダを作ると、ブラウザで「/about」というURLでアクセスできるようになります。

プログラミング未経験の方は、「フォルダ＝引き出し」「URL＝住所」と考えると分かりやすいです。 App Routerでは、この引き出しの中にpage.tsxという紙が入っていて、その紙に書かれている内容が画面に表示されます。

2. page.tsxの基本的な役割

page.tsxの役割は、とてもシンプルです。「このURLにアクセスしたとき、何を画面に表示するか」を決めます。 HTMLでいうと、bodyの中身を担当するイメージです。

Next.js App Routerでは、page.tsxが存在しないフォルダは、ページとして認識されません。つまり、page.tsxは「ここがページですよ」とNext.jsに伝える目印でもあります。

3. 最もシンプルなpage.tsxの例

まずは、一番シンプルなpage.tsxを見てみましょう。文字を表示するだけのページです。


export default function Page() {
  return (
    <div>
      <h1>はじめてのNext.js</h1>
      <p>これはpage.tsxで作ったページです。</p>
    </div>
  );
}

（画面に「はじめてのNext.js」という見出しと説明文が表示されます）

export defaultは、「このページの本体はこれです」とNext.jsに教えるための書き方です。 function Pageの中に書いた内容が、そのまま画面に出ます。

4. page.tsxとURLの関係

page.tsxは、フォルダ構成と強く結びついています。たとえば、次のような構成を考えてみましょう。


app/
 └─ blog/
     └─ page.tsx

この場合、blogフォルダの中にpage.tsxがあるので、ブラウザでは「/blog」にアクセスすると、その内容が表示されます。フォルダ名がURL、page.tsxが表示内容、と覚えると混乱しません。

5. page.tsxでコンポーネントを使う

Next.jsでは、画面の部品を「コンポーネント」として分けて書けます。 page.tsxは、それらを組み合わせる場所でもあります。


function Message() {
  return <p>コンポーネントからのメッセージです。</p>;
}

export default function Page() {
  return (
    <div>
      <h1>コンポーネントの例</h1>
      <Message />
    </div>
  );
}

（見出しの下に「コンポーネントからのメッセージです。」と表示されます）

コンポーネントとは、「部品」「パーツ」のようなものです。 page.tsxは、それらを並べて一つのページを作ります。

6. page.tsxでデータを表示する

page.tsxでは、変数を使って画面にデータを表示できます。これは、表示内容を後から変更しやすくするために重要です。


export default function Page() {
  const title = "データ表示の例";

  return (
    <div>
      <h1>{title}</h1>
      <p>変数の中身を画面に出しています。</p>
    </div>
  );
}

（画面に「データ表示の例」という見出しが表示されます）

{ }で囲むことで、文字ではなくデータとして扱われます。難しく感じる場合は、「箱の中身を取り出して表示している」と考えてください。