靜態生成（含資料與不含資料）

靜態生成 (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、資料庫等處獲取外部資料
  const data = ...
 
  // `props` 鍵的值將會被
  // 傳遞給 `Home` 元件
  return {
    props: ...
  }
}

本質上，getStaticProps 讓您可以告訴 Next.js：「這個頁面有一些資料依賴項 — 所以在構建時預渲染此頁面之前，請確保先解決這些依賴！」

注意：在開發模式下，getStaticProps 會在每次請求時執行。

讓我們使用 getStaticProps

透過實作學習會更容易理解，因此從下一頁開始，我們將使用 getStaticProps 來實作我們的部落格。