🚀

【Next.js和訳】API Reference/Data Fetching/getInitialProps

2021/10/02に公開・約4,500字

Next.js

tech

この記事について

この記事は、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>
  }
}