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
}

知っておくと良いこと:

• getInitialProps から返されるデータは、サーバーレンダリング時にシリアライズされます。getInitialProps から返されるオブジェクトは、プレーンな Object であることを確認し、Date、Map、Set を使用しないでください。
• 最初のページロードでは、getInitialProps はサーバーでのみ実行されます。その後、next/link コンポーネントを使用して別のルートに移動するか、next/router を使用して移動する際に、getInitialProps はクライアントでも実行されます。
• カスタム _app.js で getInitialProps が使用され、ナビゲート先のページが getServerSideProps を使用している場合、getInitialProps はサーバーでも実行されます。

Context Object

getInitialProps は、context と呼ばれる単一の引数を受け取ります。これは、以下のプロパティを持つオブジェクトです。

注意点

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