🚀

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

5 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Data Fetching/getInitialProps の記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

getInitialProps

推奨getStaticProps または getServerSideProps

Next.js 9.3 以降を使用している場合、getInitialProps の代わりに getStaticProps または getServerSideProps を使用することをお勧めします。

これらの新しいデータ取得方法により、静的生成とサーバーサイドレンダリングをきめ細かく選択することができます。詳しくは、PagesData Fetching のドキュメントをご覧ください。

getInitialProps は、ページ内の サーバーサイドレンダリング を可能にし、 初期データの投入 を行うことができます。これは、サーバーからすでにデータが投入された状態で ページ を送信することを意味します。これは特にSEOに有効です。

getInitialPropsAutomatic Static Optimizationを無効にします。

getInitialPropsasync関数で、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 であり、DateMapSet を使用していないことを確認してください。

最初のページロード時には、getInitialPropsはサーバ上でのみ実行されます。その後、next/linkコンポーネントやnext/routerを使用して別のルートに移動する際には、クライアント上で getInitialProps が実行されます。しかし、カスタムの _app.jsgetInitialProps を使用し、移動先のページが getServerSideProps を実装している場合には、getInitialProps はサーバー上で実行されます。

Context Object

getInitialPropscontext という 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>
  }
}

関連

次に何をすべきかについては、以下のセクションをお勧めします。

https://nextjs.org/docs/basic-features/data-fetching

https://nextjs.org/docs/basic-features/pages

https://nextjs.org/docs/advanced-features/automatic-static-optimization

Discussion

ログインするとコメントできます