API 路由

API 路由細節

這頁有一些你應該了解的 API 路由重要資訊。

不要從 getStaticProps 或 getStaticPaths 中提取 API 路由

你不應該從 getStaticProps 或 getStaticPaths 中提取 API 路由。相反地，你應該直接在 getStaticProps 或 getStaticPaths 中撰寫你的伺服器端程式碼（或呼叫輔助函式）。

原因：getStaticProps 和 getStaticPaths 只會在伺服器端執行，並且永遠不會在客戶端執行。此外，這些函式不會包含在瀏覽器的 JS bundle 中。這意味著你可以撰寫直接查詢資料庫的程式碼，而不會將其傳送給客戶端。參閲撰寫伺服器端程式碼文件以瞭解更多資訊。

一個好的使用案例：處理表單輸入

處理表單輸入是 API 路由的一個良好使用案例。舉例來說，你可以在頁面上建立一個表單，並讓它向你的 API 路由發送一個 POST 請求，隨後你可以撰寫程式碼直接將其儲存到你的資料庫。你的客戶端 bundle 中並不會夾帶 API 路由程式碼，因此你可以很放心地撰寫伺服器端的程式碼。

export default function handler(req, res) {
  const email = req.body.email;
  // 然後將 email 儲存到資料庫，等等...
}

預覽模式

當你的頁面從無頭內容管理系統（Headless CMS）取得資料時，靜態生成是很實用的。然而，當你在無頭 CMS 上編輯草稿並期望立即預覽草稿時，結果不盡如人意。你希望 Next.js 僅在請求期間（而非建置期間）來渲染這些頁面，並取得草稿內容（而非已發佈的內容）。你希望 Next.js 只在這個特定情況下繞過靜態生成。

Next.js 有一個名為預覽模式的功能，可以解決上述問題，並且它使用 API 路由。若要瞭解更多資訊，請參閱預覽模式文件。

動態 API 路由

API 路由可以是動態的，就像一般頁面一樣。請參閱動態 API 路由文件以瞭解更多資訊。

就是這樣！

在下一課即最後的基礎課程中，我們將討論如何將你的 Next.js 應用程式部署到生產環境。

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