快捷導(dǎo)航

react框架next.js學(xué)習(xí)之API?路由篇詳解

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

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

正文

next.js 作為最熱門的 react 框架，不過(guò)這么久了好像國(guó)內(nèi)使用率一直不太高。最近在研究做個(gè)小項(xiàng)目正好做下筆記，有興趣的可以一起來(lái)學(xué)習(xí)。

next.js 首頁(yè)標(biāo)榜的 12 個(gè)特性之一就是 API routes，簡(jiǎn)單的說(shuō)就是可以 next.js 直接寫 node 代碼作為后端服務(wù)來(lái)運(yùn)行。因此我們可以直接使用 next.js 直接維護(hù)一個(gè)全棧項(xiàng)目，聽起來(lái)很香的樣子。

使用方式

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

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

API 路由匹配

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

pages/api/route.js

pages/api/route/[param].js

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

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

當(dāng)請(qǐng)求過(guò)來(lái)進(jìn)行匹配時(shí)， next.js 將會(huì)按照從上到下的優(yōu)先級(jí)來(lái)匹配應(yīng)該處理的路由，比如上面三個(gè)文件同時(shí)存在，那么發(fā)送到 /api/route 的請(qǐng)求將會(huì)從被第一個(gè)文件所處理，而 /api/route/a 的請(qǐng)求會(huì)被第二個(gè)文件所處理，剩余的請(qǐng)求才會(huì)進(jìn)入第三個(gè)文件中處理。

API 處理

而在處理文件中，會(huì)調(diào)用默認(rèn)的導(dǎo)出函數(shù)來(lái)處理請(qǐng)求：

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

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

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

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

而在 req 中則擴(kuò)展了以下幾個(gè)常用屬性：

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

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

API 配置

除了 export 默認(rèn)的處理函數(shù)處理請(qǐng)求外，還可 export 一個(gè) config 對(duì)象來(lái)配置：

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

邊緣計(jì)算支持

此外，next.js 的 API routes 還支持最近很火的邊緣計(jì)算，不過(guò)邊緣計(jì)算的運(yùn)行時(shí)和 node 運(yùn)行時(shí)差異較大，需要注意改動(dòng)。由于暫時(shí)對(duì)這方面沒有研究，不做過(guò)多深入。

自定義 API

除了默認(rèn)的請(qǐng)求處理，還可以借助外部 server 來(lái)處理請(qǐng)求，比如 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;