API 路由詳情

以下是關於 API 路由 的一些重要資訊。

請勿從 getStaticProps 或 getStaticPaths 中呼叫 API 路由

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

原因如下：getStaticProps 和 getStaticPaths 僅在伺服器端執行，永遠不會在客戶端執行。此外，這些函式不會包含在瀏覽器的 JS 套件中。這意味著您可以撰寫直接查詢資料庫等程式碼，而不會將它們發送到瀏覽器。閱讀 撰寫伺服器端程式碼 文件以了解更多資訊。

適用場景：處理表單輸入

API 路由的一個適用場景是處理表單輸入。例如，您可以在頁面上建立一個表單，讓它發送 POST 請求到您的 API 路由。然後您可以撰寫程式碼直接將資料儲存到資料庫中。API 路由的程式碼不會成為客戶端套件的一部分，因此您可以安全地撰寫伺服器端程式碼。

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

預覽模式 (Preview Mode)

當您的頁面從無頭 CMS (headless CMS) 獲取資料時，靜態生成 (Static Generation) 非常有用。但是，當您在無頭 CMS 上撰寫草稿並希望立即在頁面上預覽草稿時，這並不是理想的方式。您會希望 Next.js 在請求時渲染這些頁面，而不是在建置時，並且獲取草稿內容而非已發布的內容。您會希望 Next.js 僅在這種特定情況下繞過靜態生成。

Next.js 有一個稱為預覽模式 (Preview Mode) 的功能來解決上述問題，它利用了 API 路由。要了解更多資訊，請查看我們的 預覽模式 文件。

動態 API 路由

API 路由可以是動態的，就像常規頁面一樣。查看我們的 動態 API 路由 文件以了解更多資訊。

總結

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