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

静的生成は、データあり・なしで行うことができます。

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

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

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

どのように機能するのでしょうか？ Next.jsでは、ページコンポーネントをエクスポートする際に、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 を使ってブログを実装していきます。