︙

getServerSideProps

ページからgetServerSidePropsという関数を export するとき(Server-Side Rendering)、Next.js は各 request でこのページをgetServerSidePropsによって返されたデータを使用して事前にレンダリングします。これは、頻繁に変更されるデータを fetch したい場合や、最新のデータを表示するようにページを更新したい場合に便利です。

pages/index.tsx

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>
  )
}

pages/index.js

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

あなたは getServerSidePropsで使用するために、トップレベルの scope で import modules を行うことができます。使用されるインポートはClient サイドにバンドルされません。これは、**server-side code を getServerSideProps**に直接書くことができることを意味します。これには、データベースからのデータの取得も含まれます。

Context parameter

contextパラメータは、次のキーを含む object です：

Name	Description
`params`	このページがdynamic routeを使用している場合、 `params`には route パラメータが含まれます。ページ名が`[id].js`の場合、`params`は `{ id: ... }`のようになります。
`req`	`HTTP` IncomingMessage object で、追加の`cookies`プロパティがあり、それは cookies の string values にマッピングする string キーを持つ object です。
`res`	`HTTP` response object 。
`query`	query string を含む、 dynamic route パラメータを表す object 。
`preview`	(`draftMode`に非推奨) ページがPreview Modeにある場合、`preview`は`true`となり、それ以外の場合は`false`となります。
`previewData`	(`draftMode`用に非推奨) `setPreviewData` によって設定されたpreviewデータセット。
`draftMode`	ページがドラフトモードにある場合、`draftMode`は`true`となり、そうでない場合は`false`となります。
`resolvedUrl`	`_next/data` プレフィックスを削除し、client が遷移するための request `URL` の正規化された version であり、元のクエリの values が含まれています。
`locale`	アクティブな locale (有効になっている場合)。
`locales`	有効になっている場合、すべてのサポートされている locales を含みます。
`defaultLocale`	設定された default locale を含む(有効な場合)。

getServerSideProps return values

getServerSideProps関数は、以下のいずれかのプロパティを持つ object を返すべきです：

`props`

propsはキーと object のペアで、各 value はページ component によって受け取られます。これは、渡されたどんな props も JSON.stringify でシリアライズできるように、シリアライズ可能な object であるべきです。

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js is awesome` }, // will be passed to the page component as props
  };
}

`notFound`

notFound boolean は、ページが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 }, // will be passed to the page component as props
  };
}

`redirect`

redirect object は、内部および外部のリソースにリダイレクトすることを可能にします。{ destination: string, permanent: boolean }の形状と一致するべきです。まれに、古いHTTPclients が適切に redirect するためにカスタムのステータス code を割り当てる必要があるかもしれません。これらの場合、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: {}, // will be passed to the page component as props
  };
}

Version History

Version	Changes
`v13.4.0`	App Routerは、データ取得が簡素化されて安定しています
`v10.0.0`	`locale`、`locales`、`defaultLocale`、そして`notFound`の options が追加されました。
`v9.3.0`	`getServerSideProps` 導入されました。