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

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

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

注意点

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