react框架next.js學習之API?路由篇詳解

更新時間：2022年09月30日 14:34:26 作者：嘿嘿Z

這篇文章主要為大家介紹了react框架next.js學習之API?路由篇詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

next.js 作為最熱門的 react 框架，不過這么久了好像國內使用率一直不太高。最近在研究做個小項目正好做下筆記，有興趣的可以一起來學習。

next.js 首頁標榜的 12 個特性之一就是 API routes，簡單的說就是可以 next.js 直接寫 node 代碼作為后端服務來運行。因此我們可以直接使用 next.js 直接維護一個全棧項目，聽起來很香的樣子。

使用方式

next.js 中使用文件路徑作為路由，所以在 API routes 中也是一樣，一般的頁面文件我們會放在 pages 下，而 API routes 文件我們則需要放在 pages/api 下，emmm，其實我覺得這個設計有點奇怪，為啥不是在外層增加一個 server 或者 api 的文件夾呢，放在 pages 下面感覺怪怪的。而請求時，需要請求對應的 /api/ 下的文件地址，emmm，好吧，真的挺奇怪的。

所以我們要新增一個 API 只需要在 pages/api/ 目錄下新建一個文件即可。

API 路由匹配

而 API 的文件命名有三種方式：

pages/api/route.js

pages/api/route/[param].js

pages/api/route/[...slug].js

第一種很好理解，就是會處理發(fā)送到 /api/route 的請求，第二種會接受來自 /api/route/xxxx 的請求，并將 xxxx 作為參數(shù)放到 param 中，而第三種則是會接收所有的到 /api/route/ 下的請求，比如 /api/route/a/b/c 等。

當請求過來進行匹配時， next.js 將會按照從上到下的優(yōu)先級來匹配應該處理的路由，比如上面三個文件同時存在，那么發(fā)送到 /api/route 的請求將會從被第一個文件所處理，而 /api/route/a 的請求會被第二個文件所處理，剩余的請求才會進入第三個文件中處理。

API 處理

而在處理文件中，會調用默認的導出函數(shù)來處理請求：

export default function handler(req, res) {
    res.status(200).json({ foo: 'bar' });
}

如上代碼表示請求的響應體 http 狀態(tài)碼為 200，響應體中是一段 json。

除了 nodejs 原生中包含的一些屬性和方法外，next 還在 res 中擴展了以下幾個常用的方法：

res.status(code) 響應的 http 狀態(tài)碼
res.json(body) json 響應體
res.send(body) 其它響應體，可以是 string、object、Buffer
res.redirect([status,] path) 重定向
res.revalidate(urlPath) 重新進行校驗

而在 req 中則擴展了以下幾個常用屬性：

req.cookies 請求包含的 cookies
req.query 請求的 query 參數(shù)
req.body 請求體

是不是很熟悉，沒錯就是 express.js 的一些功能。

API 配置

除了 export 默認的處理函數(shù)處理請求外，還可 export 一個 config 對象來配置：

export const config = {
    api: {
        // 請求體處理
        bodyParser: {
            sizeLimit: '1mb'
        },
        // 響應體的大小限制
        responseLimit: '8mb',
        // 用于指定請求是否被外部服務處理，這個暫時還沒搞清楚是怎么工作的，等研究完了再來更新
        externalResolver: true
    }
};

邊緣計算支持

此外，next.js 的 API routes 還支持最近很火的邊緣計算，不過邊緣計算的運行時和 node 運行時差異較大，需要注意改動。由于暫時對這方面沒有研究，不做過多深入。

自定義 API

除了默認的請求處理，還可以借助外部 server 來處理請求，比如 graphql：

import { createServer } from '@graphql-yoga/node';
const typeDefs = /* GraphQL */ `
    type Query {
        users: [User!]!
    }
    type User {
        name: String
    }
`;
const resolvers = {
    Query: {
        users() {
            return [{ name: 'Nextjs' }];
        }
    }
};
const server = createServer({
    schema: {
        typeDefs,
        resolvers
    },
    endpoint: '/api/graphql'
});
export default server;