getServerSideProps
ページからgetServerSideProps
(サーバーサイドレンダリング)という関数をエクスポートすると、Next.jsはgetServerSideProps
によって返されるデータを使用して、各リクエストでこのページをプリレンダリングします。これは、頻繁に変更されるデータをフェッチし、最新のデータを表示するページを更新したい場合に便利です。
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: ... } のようになります。 |
req | HTTPのIncomingMessage オブジェクト。追加でcookies プロパティがあり、文字列キーと文字列値のクッキーをマッピングするオブジェクト。 |
res | HTTPレスポンスオブジェクト。 |
query | 動的ルートパラメータを含むクエリ文字列を表すオブジェクト。 |
preview | (draftMode で非推奨)ページがプレビューモードの場合はtrue 、そうでない場合はfalse 。 |
previewData | (draftMode で非推奨)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.0 | App Routerが簡略化されたデータフェッチで安定版になりました |
v10.0.0 | locale 、locales 、defaultLocale 、notFound オプションが追加されました。 |
v9.3.0 | getServerSideProps が導入されました。 |