/

如何使用 Next.js API 路由

如何使用 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 文件中的評論列表：

1
2
3
4
5
6
7
8
[
  {
    "comment": "第一條"
  },
  {
    "comment": "好文章"
  }
]

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

1
2
3
4
5
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 值：

1
2
3
4
5
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 的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
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 中間件來添加更多功能。

tags: [“Next.js”, “API”, “routes”, “Node.js”]