できない.dev

Pages Router

別名: ページルーター / pages ディレクトリ / pages directory

Next.js が pages/ ディレクトリで提供する従来のルーティング方式。
ファイル名がそのまま URL になり、getServerSideProps などのデータ取得関数と _app / _document による共通化を使う。
App Router とは同じプロジェクトに共存できる。

#nextjs #pages-router #routing #getserversideprops #react

公開:

定義

Pages Router は、Next.js が pages/ ディレクトリで提供する従来のルーティング方式です。pages/ 配下に置いたファイルのパスがそのまま URL になり、default export したコンポーネントがページとして描画されます。App Router が登場する前から使われてきた方式で、現在も引き続きサポートされています。

詳細

ページは既定でクライアント側にも配られるコンポーネントで、サーバー側のデータ取得は決まった名前の関数を export して行います。getServerSideProps はリクエストごと、getStaticProps はビルド時、getStaticPaths は動的セグメントの事前生成に使います。
全ページ共通の処理は pages/_app.tsx、HTML の外枠は pages/_document.tsx が担当します。

pages/
  _app.tsx          ← 全ページ共通のラッパー
  index.tsx         ← /
  blog/
    [slug].tsx      ← /blog/:slug
  api/
    hello.ts        ← /api/hello（API Routes）

<title> などのメタ情報は next/head の <Head> で差し込みます。
App Router の metadata オブジェクトは Pages Router では読まれません。
API は pages/api/ の API Routes が担当し、App Router の Route Handler とは書き方が異なります。

よくある誤解

  • App Router が来たので使えなくなった: 廃止されておらず、同じプロジェクトで app/ と併用できます。
    ただし同じ URL を両方で定義することはできません。
  • app/ 向けの書き方がそのまま動く: metadata export・"use client"・Server Component は App Router の仕組みで、pages/ 配下では効きません。

関連

新しい方式は App Router、App Router 側の API 定義は Route Handler を参照してください。
両方式の取り違えで起きる症状は Next.js の metadata が反映されない にまとめています。

この記事は役立ちましたか？