データあり・なしの静的生成

静的生成 (Static Generation) は、データの有無にかかわらず行うことができます。

これまでに作成したすべてのページは、外部データの取得を必要としませんでした。これらのページは、プロダクション用にアプリがビルドされるときに自動的に静的に生成されます。

しかし、一部のページでは、外部データを取得せずにHTMLをレンダリングできない場合があります。ビルド時にファイルシステムにアクセスしたり、外部APIをフェッチしたり、データベースをクエリしたりする必要があるかもしれません。Next.jsはこのケース — データありの静的生成 (Static Generation with data) — をデフォルトでサポートしています。

getStaticProps を使ったデータありの静的生成

どのように機能するのでしょうか？Next.jsでは、ページコンポーネントをエクスポートする際に、getStaticProps という async 関数もエクスポートできます。これを行うと:

• getStaticProps はプロダクションではビルド時に実行され、
• 関数内で外部データを取得し、それをページのpropsとして送信できます。

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // ファイルシステム、API、DBなどから外部データを取得
  const data = ...
 
  // `props` キーの値は
  // `Home` コンポーネントに渡されます
  return {
    props: ...
  }
}

基本的に、getStaticProps を使うことで、Next.jsに対して「このページにはいくつかのデータ依存関係があります — ビルド時にこのページをプリレンダリングする際は、まずそれらを解決してください！」と伝えることができます。

注: 開発モードでは、getStaticProps は各リクエストごとに実行されます。

getStaticProps を使ってみよう

実際にやってみる方が学びやすいので、次のページからは getStaticProps を使ってブログを実装していきます。