TL;DR

App Router の app ディレクトリに置く特別なファイルの 1 つ。特定の URL Segment に置くと、その Route の画面を提供する。

仕組み

/src/app/company-info/page.tsx は /company-info に対応する。コンポーネントは export default する必要がある。

// src/app/company-info/page.tsx
export default function Page() {
  return (
    <div>
      <h1>企業概要</h1>
    </div>
  )
}

公式ドキュメントによると、page はそのルートに固有の UI を定義するファイルで、ルートのサブツリーの末端(leaf)になる。ルートセグメントを公開してアクセスできるようにするには、page ファイルが必要である。デフォルトでは Server Component だが、Client Component にもできる。同じセグメントの layout.tsx、template.js、error.tsx、loading.tsx に包まれる、最も内側のファイルである。

props として params と searchParams を受け取る。params は Dynamic Routes のパラメータを、searchParams は URL のクエリパラメータを持つオブジェクトに解決される Promise である。Next.js 15 から Promise になったので、await か React の use で値を取り出す。

例

params で、URL の slug に応じた内容を表示する例。

// app/blog/[slug]/page.tsx
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

自分の理解

拡張子は .jsx(.js)でもよい。

関連

出典