Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

getInitialProps

補足: getInitialPropsは従来のAPIです。代わりにgetStaticPropsまたはgetServerSidePropsの使用をお勧めします。

getInitialPropsは、ページのデフォルトでエクスポートされるReactコンポーネントに追加できるasync関数です。サーバー側とページ遷移時のクライアント側の両方で実行されます。関数の結果はpropsとしてReactコンポーネントに渡されます。

pages/index.tsx
TypeScript
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であり、DateMapSetを使用していないことを確認してください。
  • 初期ページ読み込み時、getInitialPropsはサーバー上でのみ実行されます。その後、next/linkコンポーネントまたはnext/routerを使用して別のルートに移動する際に、クライアント側でも実行されます。
  • カスタム_app.jsgetInitialPropsが使用され、遷移先のページがgetServerSidePropsを使用している場合、getInitialPropsもサーバー上で実行されます。

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

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

名前説明
pathname現在のルート、/pages内のページのパス
queryURLのクエリ文字列。オブジェクトとして解析される
asPathブラウザに表示される実際のパス(クエリを含む)のString
reqHTTPリクエストオブジェクト(サーバー側のみ)
resHTTPレスポンスオブジェクト(サーバー側のみ)
errレンダリング中にエラーが発生した場合のエラーオブジェクト

注意点

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