getInitialProps

推奨: getStaticProps または getServerSideProps

getInitialProps は、ページ内のサーバーサイドレンダリングを可能にし、初期データを追加出来るようになります。つまり、既にデータが追加されているページをサーバーから送信するということです。これは特に SEO 対策に有効です。

getInitialProps は Automatic Static Optimization を無効化します。

getInitialProps は、任意のページに静的メソッドとして追加できる非同期 関数です。次の例を見てみましょう:

function Page({ stars }) {
  return <div>Next stars: {stars}</div>;
}

Page.getInitialProps = async ctx => {
  const res = await fetch('https://api.github.com/repos/zeit/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/zeit/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 から返されるオブジェクトがプレーンなオブジェクトで Date 、 Map 、 Set を使用していないことを確認してください。

最初のページのロードでは、 getInitialProps はサーバー上でのみ実行されます。getInitialProps は、 next/link コンポーネントを介して、または next/router を使用して別のルートへ移動するときにクライアント上で実行されます。しかしもし getInitialProps がカスタムの _app.js の中で使われていて遷移先のページが getServerSideProps を実装している場合、 getInitialProps はサーバー上で実行されます。

Context オブジェクト

getInitialProps は context という単一の引数を受け取り、この context は以下のプロパティを持つオブジェクトです:

pathname - 現在のルート。これは /pages にあるページのパスです。
query - オブジェクトとしてパース(解析)される URL のクエリ文字列セクションです。
asPath - ブラウザに表示される実際のパスの文字列です(クエリを含む)。
req - HTTP リクエストオブジェクトです(サーバのみ)。
res - HTTP レスポンスオブジェクトです(サーバのみ)。
err - レンダリング中にエラーが発生した場合のエラーオブジェクトです。

注意事項

getInitialProps は各ページの export 部分のみで使用できます。子コンポーネントでは使用できません。
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>;
  }
}

getInitialProps

Context オブジェクト

注意事項

TypeScript

関連事項

データ取得

Was this helpful?