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
であり、Date
、Map
、Set
を使用していないことを確認してください。- 初期ページ読み込み時、
getInitialProps
はサーバー上でのみ実行されます。その後、next/link
コンポーネントまたはnext/router
を使用して別のルートに移動する際に、クライアント側でも実行されます。- カスタム
_app.js
でgetInitialProps
が使用され、遷移先のページがgetServerSideProps
を使用している場合、getInitialProps
もサーバー上で実行されます。
コンテキストオブジェクト
getInitialProps
は、以下のプロパティを持つcontext
と呼ばれる単一の引数を受け取ります:
名前 | 説明 |
---|---|
pathname | 現在のルート、/pages 内のページのパス |
query | URLのクエリ文字列。オブジェクトとして解析される |
asPath | ブラウザに表示される実際のパス(クエリを含む)のString |
req | HTTPリクエストオブジェクト(サーバー側のみ) |
res | HTTPレスポンスオブジェクト(サーバー側のみ) |
err | レンダリング中にエラーが発生した場合のエラーオブジェクト |
注意点
getInitialProps
はpages/
のトップレベルファイルでのみ使用でき、ネストされたコンポーネントでは使用できません。コンポーネントレベルでのネストされたデータフェッチについては、App Routerの探索をお勧めします。- ルートが静的か動的かに関わらず、
getInitialProps
からprops
として返されるデータは、初期HTMLのクライアント側で確認できます。これは、ページを正しくハイドレーションできるようにするためです。props
で機密情報をクライアントに渡さないように注意してください。