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

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

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

注意点

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