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で渡すデータに、クライアントで利用できるべきではない機密情報が含まれていないことを確認してください。