getInitialProps

補足: getInitialProps はレガシーAPIです。代わりに getStaticProps または getServerSideProps の使用を推奨します。

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

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
}

Page.getInitialProps = async (ctx) => {
  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 }) {
  return stars
}

補足:

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

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

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

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

getInitialProps は context という単一の引数を受け取り、以下のプロパティを持つオブジェクトです:

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

注意点

getInitialProps は pages/ トップレベルのファイルでのみ使用可能で、ネストされたコンポーネントでは使用できません。コンポーネントレベルでネストされたデータ取得が必要な場合は、App Router の使用を検討してください。
ルートが静的か動的かに関わらず、getInitialProps から props として返されるデータは、初期HTMLでクライアントサイドから確認可能です。これはページが正しくハイドレートされるためです。クライアントサイドで利用可能にしてはいけない機密情報を props に含めないように注意してください。

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

注意点

On this page