Zenn
Open3

Pages Router入門

にっしーにっしー

https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props

getServerSidePropsとは？

gsspでページがリクエストされた時に、データ取得ができる。

いつ使うべきか

扱うデータとしては、サーバーサイドでのみ扱いたいデータなどで、認証情報など、クライアント側に表出してはいけないデータを扱うのが良い。
頻繁に変更されるデータを取得し、ページを更新して最新のデータを表示させたい場合に便利。

振る舞い

getServerSideProps runs on the server.
getServerSideProps can only be exported from a page.
getServerSideProps returns JSON.

gsspの戻り値

contextというオブジェクトを返す

getServerSideProps (GSSP) の戻り値のプロパティについて、わかりやすくまとめます。これらのプロパティは、ページコンポーネントのレンダリングに必要なデータや設定を提供します。

プロパティ 説明 例または注記
params 動的ルートを使用している場合に、ルートパラメータを含むオブジェクトです。 ページ名が [id].js の場合、params は { id: '123' } のようになります。
req HTTP リクエストオブジェクトです。追加で cookies プロパティがあり、これはクッキーのキーと値のマッピングを持つオブジェクトです。 req.cookies を使ってクッキーにアクセスできます。
res HTTP レスポンスオブジェクトです。レスポンスのステータスコードやヘッダーの設定、リダイレクトなどに使用されます。
query クエリ文字列を表すオブジェクトで、動的ルートパラメータも含まれます。 URL が /page?id=123 の場合、query は { id: '123' } になります。
preview (Deprecated) ページがプレビューモードかどうかを示すフラグです。true ならプレビューモード、false なら通常モードです。 draftMode に置き換えられました。
previewData (Deprecated) setPreviewData で設定されたプレビューデータです。 draftMode に置き換えられました。
draftMode ページがドラフトモードかどうかを示すフラグです。true ならドラフトモード、false なら通常モードです。
resolvedUrl 正規化されたリクエスト URL です。クライアント遷移のために _next/data プレフィックスを削除し、元のクエリ値を含みます。
locale アクティブなロケール（言語設定）です。ロケールが有効な場合に含まれます。
locales サポートされているすべてのロケールの配列です。ロケールが有効な場合に含まれます。
defaultLocale 設定されたデフォルトのロケールです。ロケールが有効な場合に含まれます。

すごく冗長に書くと、gsspでは以下のように各データを取得できる

export async function getServerSideProps(context) {
  const { params, req, res, query, draftMode, resolvedUrl, locale, locales, defaultLocale } = context;

  // クッキーの取得
  const cookies = req.cookies;

  // クエリパラメータの取得
  const id = query.id;

  // カスタムデータフェッチ
  const data = await fetchDataFromAPI();

  // 必要に応じてレスポンスをカスタマイズ
  if (!data) {
    res.writeHead(302, { Location: '/not-found' });
    res.end();
    return { props: {} };
  }

  return {
    props: {
      data,
      params,
      cookies,
      query,
      draftMode,
      resolvedUrl,
      locale,
      locales,
      defaultLocale,
    }
  };
}

Tips

型の推論

InferGetServerSidePropsType<typeof getServerSideProps>) とすることで、gsspの際の型の推論を自動で行うことができる。

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps = (async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

https://example.com/products?id=123&redirectPath=%2Fdashboard
req.urlには"/products?id=123&redirectPath=%2Fdashboard"が入る
実際には、req.url にはプロトコル（https://）やホスト名（example.com）は含まれません。req.url にはパスとクエリストリングのみが含まれます。

にっしーにっしー

_app.tsxの役割
このファイルはアプリケーション全体のエントリーポイントとなり、ページ間で共通のレイアウトや状態管理、スタイルの適用などに使用される

にっしーにっしー

_app.tsxの役割
このファイルはアプリケーション全体のエントリーポイントとなり、ページ間で共通のレイアウトや状態管理、スタイルの適用などに使用される