【Next.js和訳】API Reference/Data Fetching/getInitialProps
この記事について
この記事は、Data Fetching/getInitialProps の記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
getInitialProps
getInitialProps
は、ページ内の サーバーサイドレンダリング を可能にし、 初期データの投入 を行うことができます。これは、サーバーからすでにデータが投入された状態で ページ を送信することを意味します。これは特にSEOに有効です。
getInitialProps
はasync
関数で、static method
として任意のページに追加することができます。以下の例を見てみましょう。
function Page({ stars }) {
return <div>Next stars: {stars}</div>
}
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 Page
または、クラスのコンポーネントを使用する :
import React from "react"
class Page extends React.Component {
static async getInitialProps(ctx) {
const res = await fetch("https://api.github.com/repos/vercel/next.js")
const json = await res.json()
return { stars: json.stargazers_count }
}
render() {
return <div>Next stars: {this.props.stars}</div>
}
}
export default Page
getInitialProps
は非同期的にデータを取得し、それを props
に反映させるために使用します。
getInitialProps
から返されたデータは、JSON.stringify
が行うのと同様に、サーバーレンダリング時にシリアライズされます。getInitialProps
から返されるオブジェクトが、プレーンな Object
であり、Date
や Map
、Set
を使用していないことを確認してください。
最初のページロード時には、getInitialProps
はサーバ上でのみ実行されます。その後、next/link
コンポーネントやnext/router
を使用して別のルートに移動する際には、クライアント上で getInitialProps
が実行されます。しかし、カスタムの _app.js
で getInitialProps
を使用し、移動先のページが getServerSideProps
を実装している場合には、getInitialProps
はサーバー上で実行されます。
Context Object
getInitialProps
は context
という 1 つの引数を受け取ります。これは以下のプロパティを持つオブジェクトです。
-
pathname
- 現在のルート。これは/pages
にあるページのパスです。 -
query
- オブジェクトとして解析された URL のクエリ文字列部分。 -
asPath
- ブラウザに表示される、実際のパス(クエリを含む)のString
です。 -
req
- HTTP リクエストオブジェクト (サーバーのみ) -
res
- HTTP レスポンスオブジェクト (サーバーのみ) -
err
- レンダリング中に何らかのエラーが発生した場合のエラーオブジェクト
警告
-
getInitialProps
は、子コンポーネントでは 使用できません 、各ページのデフォルトのエクスポートでのみ使用できます。 - サーバーサイドのみのモジュールを
getInitialProps
内で使用している場合は、必ずそれらを 適切にインポート してください。
TypeScript
TypeScript を使用している場合は、関数コンポーネントに NextPage
型を使用することができます。
import { NextPage } from "next"
interface Props {
userAgent?: string
}
const Page: NextPage<Props> = ({ userAgent }) => <main>Your user agent: {userAgent}</main>
Page.getInitialProps = async ({ req }) => {
const userAgent = req ? req.headers["user-agent"] : navigator.userAgent
return { userAgent }
}
export default Page
また、React.Component の場合は、NextPageContext を使うことができます。
import React from "react"
import { NextPageContext } from "next"
interface Props {
userAgent?: string
}
export default class Page extends React.Component<Props> {
static async getInitialProps({ req }: NextPageContext) {
const userAgent = req ? req.headers["user-agent"] : navigator.userAgent
return { userAgent }
}
render() {
const { userAgent } = this.props
return <main>Your user agent: {userAgent}</main>
}
}
関連
次に何をすべきかについては、以下のセクションをお勧めします。
Discussion