如何使用Next.js API路由

了解Next.js提供的這項強大技術,以在Next.js應用程序中創建API端點

除了創造頁面路線,這意味著頁面作為網頁提供給瀏覽器,Next.js可以創建API路線

這是一個非常有趣的功能,因為這意味著Next.js可用於為Next.js本身存儲和檢索的數據創建前端,並通過獲取請求傳輸JSON。

API路由位於/pages/api/文件夾,並映射到/api端點。

此功能是非常在創建應用程序時很有用。

在這些路由中,我們編寫Node.js代碼(而不是React代碼)。這是一種範式轉換,您可以從前端移動到後端,但是非常無縫。

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

假設您有一個評論列表,該評論列表存儲在comments.json文件:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

這是一個示例代碼,它將註釋列表返回給客戶端:

import comments from './comments.json'

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

它將聽/api/commmentsGET請求的網址,您可以嘗試使用瀏覽器調用它:

API路由也可以使用動態路由像網頁一樣,請使用[]創建動態API路由的語法,例如/pages/api/comments/[id].js它將檢索特定於帖子ID的評論。

在 - 的里面[id].js您可以檢索id通過在內部查找來獲得價值req.query目的:

import comments from '../comments.json'

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

在這裡,您可以看到上面的代碼正在運行:

在動態頁面中,您需要導入useRouternext/router,然後使用獲取路由器對象const router = useRouter(),然後我們就可以獲取id值使用router.query.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.queryreq.method我們已經看到,我們可以通過引用訪問cookiereq.cookies,請求正文在req.body

在引擎蓋下,這一切都由是一個由支持Next.js的團隊開發的支持異步HTTP微服務的庫。

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

免費下載我的Next.js手冊


接下來的更多教程: