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もサーバー上で実行されます。

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

getInitialPropsは、次のプロパティを持つオブジェクトである`context`という単一の引数を受け取ります。

注意点

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