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を使用して別のルートに移動する際に、クライアント側でも実行されます。
• カスタム_app.jsでgetInitialPropsが使用され、遷移先のページがgetServerSidePropsを使用している場合、getInitialPropsもサーバー上で実行されます。

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

getInitialPropsは、以下のプロパティを持つcontextと呼ばれる単一の引数を受け取ります：

注意点

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