getInitialProps

Good to know: getInitialPropsはレガシーな API です。代わりに、getStaticPropsまたはgetServerSidePropsの使用を推奨します。

getInitialPropsは、ページの default として export された React component に追加できるasync関数です。それは server-side と Client 側の両方で、ページの遷移中に再度実行されます。関数の結果はpropsとして React component に転送されます。

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
}

Page.getInitialProps = async (ctx) => {
  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 }) {
  return stars
}

Good to know:

• getInitialPropsから返されるデータは、 server レンダリング時にシリアライズされます。getInitialPropsから返される object が、普通のObjectであり、Date、Map、またはSetを使用していないことを確認してください。
• 初回のページ読み込みでは、getInitialPropsは server だけで実行されます。その後、next/link component を使用して別の route に移動したり、next/routerを使用した場合にも、getInitialPropsは client でも実行されます。
• getInitialPropsがカスタムの_app.jsで使用され、移動先のページがgetServerSidePropsを使用している場合、getInitialPropsも server 上で実行されます。

Context Object

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

Caveats

• getInitialPropsはpages/の最上位ファイルでのみ使用でき、ネストされたコンポーネントでは使用できません。ネストされたデータフェッチングを component レベルで持つためには、App Routerの探索を検討してみてください。
• あなたの route が静的であるか dynamic であるかに関わらず、 getInitialPropsから返される任意のデータはpropsとして、初期の HTML のクライアントサイドで見ることができます。これは、ページが 正しく補充される ことを可能にするためです。 propsの中に client で利用可能でないべき機密情報を渡さないように注意してください。