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

静的生成は、データの有無にかかわらず実行できます。

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

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

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

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

• `getStaticProps` は本番環境のビルド時に実行され、…
• 関数内で、外部データをフェッチして、ページに props として送信できます。

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` を使ってブログを実装していきます。