getInitialProps

推奨: getStaticProps または getServerSideProps

Next.js 9.3以降を使用している場合は、 getInitialProps ではなく、 getStaticProps または getServerSideProps を使用することをお勧めします。

これらの新しいデータ取得メソッドを使用することで、静的生成とサーバーサイドレンダリングを細かく選択できるようになります。 Pagesデータ取得のドキュメントの詳細については、こちらをご覧ください:

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

getInitialPropsAutomatic 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 から返されるオブジェクトがプレーンなオブジェクトで DateMapSet を使用していないことを確認してください。

最初のページのロードでは、 getInitialProps はサーバー上でのみ実行されます。 getInitialProps は、 next/link コンポーネントを介して、または next/router を使用して別のルートへ移動するときにクライアント上で実行されます。

Context オブジェクト

getInitialPropscontext という単一の引数を受け取り、この 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>;
  }
}

関連事項

次にやるべきこととして、以下のセクションを読むことをお勧めします: