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

静的生成はデータあり/なしで実行できます。

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

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

`getStaticProps` を使用したデータありの静的生成

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

• getStaticProps は本番環境でビルド時に実行され、そして…
• 関数内で、外部データを取得し、プロップスとしてページに送信できます。

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...
 
  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

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

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

`getStaticProps` を使ってみましょう

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