如何使用 Next.js API 路由

了解這個由 Next.js 提供的強大技術，用於在 Next.js 應用程序中創建 API 端點。

除了創建頁面路由（意味著頁面作為 Web 頁面提供給瀏覽器），Next.js 還可以創建API 路由。

這是一個非常有趣的功能，因為這意味著 Next.js 可以用於創建存儲在 Next.js 中並通過 fetch 請求傳輸 JSON 的數據的前端。

API 路由位於 /pages/api/ 文件夾下，並且與 /api 端點相映射。

這個功能在創建應用程序時非常有用。

在這些路由中，我們編寫的是 Node.js 代碼（而不是 React 代碼）。這是一個範式轉變，你從前端轉向後端，但非常平滑。

假如你有一個 /pages/api/comments.js 文件，它的目標是以 JSON 的形式返回博客文章的評論。

假如你有一個存儲在 comments.json 文件中的評論列表：

[
  {
    "comment": "第一條"
  },
  {
    "comment": "好文章"
  }
]

下面是一個示例代碼，返回評論列表給客戶端：

import comments from './comments.json'

export default (req, res) => {
  res.status(200).json(comments)
}

它將在 /api/comments URL 上聽取 GET 請求，你可以使用瀏覽器來調用它：

API 路由還可以像頁面一樣使用動態路由，使用 [] 語法創建動態 API 路由，例如 /pages/api/comments/[id].js，將檢索特定於某個文章 id 的評論。

在 [id].js 內，你可以通過在 req.query 對象中查找它來獲取 id 值：

import comments from '../comments.json'

export default (req, res) => {
  res.status(200).json({ post: req.query.id, comments })
}

以下是上述代碼的執行結果：

在動態頁面中，你需要從 next/router 引入 useRouter，然後使用 const router = useRouter() 獲取 router 對象，然後我們就可以使用 router.query.id 來獲取 id 值。

在服務器端，一切都變得更簡單，因為查詢被附加到請求對象上。

如果你發送 POST 請求，所有步驟都是一樣的 - 它們都通過默認導出進行處理。

要將 POST 請求與 GET 和其他 HTTP 方法（PUT、DELETE）區分開，查詢 req.method 的值：

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

除了我們已經看到的 req.query 和 req.method，我們還可以通過引用 req.cookies 獲取 cookie，通過 req.body 獲取請求正文中的內容。

在幕後，這一切都是由 Micro 驅動的，它是一個由 Next.js 建立的非同步 HTTP 微服務的庫。

你可以在我們的 API 路由中使用任何 Micro 中間件來添加更多功能。