Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

getServerSideProps

ページからgetServerSideProps(サーバーサイドレンダリング)という関数をエクスポートすると、Next.jsはgetServerSidePropsによって返されるデータを使用して、各リクエストでこのページをプリレンダリングします。これは、頻繁に変更されるデータをフェッチし、最新のデータを表示するページを更新したい場合に便利です。

pages/index.tsx
TypeScript
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps = (async () => {
  // 外部APIからデータをフェッチ
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // propsを介してページにデータを渡す
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

getServerSidePropsで使用するモジュールをトップレベルスコープでインポートできます。使用されたインポートはクライアントサイド用にバンドルされることはありません。これは、データベースからデータをフェッチするなど、getServerSideProps内でサーバーサイドコードを直接記述できることを意味します。

コンテキストパラメータ

contextパラメータは、以下のキーを含むオブジェクトです:

名前説明
paramsこのページが動的ルートを使用している場合、paramsにはルートパラメータが含まれます。ページ名が[id].jsの場合、params{ id: ... }のようになります。
reqHTTPのIncomingMessageオブジェクト。追加でcookiesプロパティがあり、文字列キーと文字列値のクッキーをマッピングするオブジェクト。
resHTTPレスポンスオブジェクト
query動的ルートパラメータを含むクエリ文字列を表すオブジェクト。
previewdraftModeで非推奨)ページがプレビューモードの場合はtrue、そうでない場合はfalse
previewDatadraftModeで非推奨)setPreviewDataによって設定されたプレビューデータ。
draftModeページがドラフトモードの場合はtrue、そうでない場合はfalse
resolvedUrlクライアント遷移用の_next/dataプレフィックスを取り除き、元のクエリ値を含む、リクエストURLの正規化されたバージョン。
localeアクティブなロケール(有効な場合)を含みます。
localesサポートされているすべてのロケール(有効な場合)を含みます。
defaultLocale設定されたデフォルトロケール(有効な場合)を含みます。

getServerSidePropsの戻り値

getServerSideProps関数は、以下のいずれかのプロパティを持つオブジェクトを返す必要があります:

props

propsオブジェクトは、各値がページコンポーネントによって受け取られるキーと値のペアです。シリアライズ可能なオブジェクトである必要があり、渡されたpropsはJSON.stringifyでシリアライズできます。

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.jsは素晴らしい` }, // propsとしてページコンポーネントに渡されます
  }
}

notFound

notFoundブール値により、ページは404ステータスと404ページを返すことができます。notFound: trueの場合、以前に正常に生成されたページであっても、ページは404を返します。これは、作成者によってユーザー生成コンテンツが削除されるようなユースケースをサポートすることを目的としています。

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      notFound: true,
    }
  }
 
  return {
    props: { data }, // propsとしてページコンポーネントに渡されます
  }
}

redirect

redirectオブジェクトにより、内部および外部リソースにリダイレクトできます。{ destination: string, permanent: boolean }の形状に一致する必要があります。まれなケースでは、古いHTTPクライアントが適切にリダイレクトするために、カスタムステータスコードを割り当てる必要がある場合があります。このような場合、permanentプロパティの代わりにstatusCodeプロパティを使用できますが、両方を同時に使用することはできません。

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
 
  return {
    props: {}, // propsとしてページコンポーネントに渡されます
  }
}

バージョン履歴

バージョン変更点
v13.4.0App Routerが簡略化されたデータフェッチで安定版になりました
v10.0.0localelocalesdefaultLocalenotFoundオプションが追加されました。
v9.3.0getServerSidePropsが導入されました。