【NEXT.JS 系列】預先渲染和數據獲取 3

有數據和無數據的靜態生成

靜態生成可以在有數據和沒有數據的情況下完成。

到目前為止，我們建立的所有頁面都不需要獲取外部數據。 當應用程式為生產而建構時，這些頁面將自動靜態生成。

但是，對於某些頁面，如果不先獲取一些外部數據，您可能無法呈現 HTML。 也許您需要在建構時訪問檔案系統、獲取外部 API 或查詢資料庫。 Next.js 開箱即用地支援這種情況—帶數據的靜態生成。

使用 getStaticProps 生成靜態數據

怎麼辦到？ 嗯，在 Next.js 中，當你匯出一個頁面元件時，你還可以匯出一個名為 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：“嘿，這個頁面有一些依賴的數據—所以當你在 build time 預先渲染這個頁面時，一定要先解決它們！”

注意：在開發模式下，getStaticProps 會在每個請求上運行。

邊做邊學更容易，所以從下一頁開始，我們將使用 getStaticProps 來實現我們的部落格。