getInitialProps

補足: getInitialPropsは従来のAPIです。代わりにgetStaticPropsまたはgetServerSidePropsの使用をお勧めします。

getInitialPropsは、ページのデフォルトでエクスポートされるReactコンポーネントに追加できるasync関数です。サーバー側とページ遷移時のクライアント側の両方で実行されます。関数の結果はpropsとしてReactコンポーネントに渡されます。

pages/index.tsx

TypeScript

import { NextPageContext } from 'next'
 
Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
 
export default function Page({ stars }: { stars: number }) {
  return stars
}

補足:

getInitialPropsから返されるデータは、サーバーレンダリング時にシリアライズされます。getInitialPropsから返されるオブジェクトは、プレーンなObjectであり、Date、Map、Setを使用していないことを確認してください。

初期ページ読み込み時、getInitialPropsはサーバー上でのみ実行されます。その後、next/linkコンポーネントまたはnext/routerを使用して別のルートに移動する際に、クライアント側でも実行されます。

カスタム_app.jsでgetInitialPropsが使用され、遷移先のページがgetServerSidePropsを使用している場合、getInitialPropsもサーバー上で実行されます。

コンテキストオブジェクト

getInitialPropsは、以下のプロパティを持つcontextと呼ばれる単一の引数を受け取ります：

名前	説明
`pathname`	現在のルート、`/pages`内のページのパス
`query`	URLのクエリ文字列。オブジェクトとして解析される
`asPath`	ブラウザに表示される実際のパス（クエリを含む）の`String`
`req`	HTTPリクエストオブジェクト（サーバー側のみ）
`res`	HTTPレスポンスオブジェクト（サーバー側のみ）
`err`	レンダリング中にエラーが発生した場合のエラーオブジェクト

注意点

getInitialPropsはpages/のトップレベルファイルでのみ使用でき、ネストされたコンポーネントでは使用できません。コンポーネントレベルでのネストされたデータフェッチについては、App Routerの探索をお勧めします。
ルートが静的か動的かに関わらず、getInitialPropsからpropsとして返されるデータは、初期HTMLのクライアント側で確認できます。これは、ページを正しくハイドレーションできるようにするためです。propsで機密情報をクライアントに渡さないように注意してください。