靜態生成 - 在有或沒有資料的情況下

不管在有沒有資料的情況下都可以使用靜態生成生成頁面。

目前為止，我們建立的所有頁面都不需要取得外部資料。正式環境下的應用程式將會自動的生成靜態頁面。

但是，對於某些頁面，如果不先拿取外部資料，可能就無法渲染 HTML。例如：你需要在建造時就能夠存取檔案系統、取得外部 API 或查詢資料庫。Next.js 可以跳脫出框架，透過 — 有資料的靜態生成 — 達成這類的使用情境。

透過 getStaticProps 使用有資料的靜態生成

這是如何作用的呢？在 Next.js 中，當你匯出一個頁面元件時，你也可以匯出一個非同步函式，並命名為 getStaticProps。如果你這樣做了，那麼：

• 在正式環境中 getStaticProps 會在建造時執行，並且…
• 將可以在函式中獲取外部資料，同時，也可以將資料傳遞給頁面。

export default function Home(props) { ... }

export async function getStaticProps() {
  // 透過檔案系統、API、資料庫等方式 拿取外部資料
  const data = ...

  // props 下的資料將會被 `Home` 元件接受
  return {
    props: ...
  }
}

最終，getStaticProps 可以像這樣告訴 Next.js：「嘿，這個頁面會依賴一些資料 — 所以當你在預先生成頁面時，請先確拿取資料這件事情有被完成！」。

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

開始使用 getStaticProps 吧！

學習的最好方式就是實作，所以從下一頁開始，我們將使用 getStaticProps 來實作我們的部落格。

← 返回上一頁 前往下一頁 →