关于前端:一起来学-nextjs-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

第一种很好了解，就是会解决发送到 /api/route 的申请，第二种会承受来自 /api/route/xxxx 的申请，并将 xxxx 作为参数放到 param 中，而第三种则是会接管所有的到 /api/route/ 下的申请，比方 /api/route/a/b/c 等。

当申请过去进行匹配时，next.js 将会依照从上到下的优先级来匹配应该解决的路由，比方下面三个文件同时存在，那么发送到 /api/route 的申请将会从被第一个文件所解决，而 /api/route/a 的申请会被第二个文件所解决，残余的申请才会进入第三个文件中解决。

API 解决

而在解决文件中，会调用默认的导出函数来解决申请：

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

如上代码示意申请的响应体 http 状态码为 200，响应体中是一段 json。

除了 nodejs 原生中蕴含的一些属性和办法外，next 还在 res 中扩大了以下几个罕用的办法：

• res.status(code) 响应的 http 状态码
• res.json(body) json 响应体
• res.send(body) 其它响应体，能够是 string、object、Buffer
• res.redirect([status,] path) 重定向
• res.revalidate(urlPath) 从新进行校验

而在 req 中则扩大了以下几个罕用属性：

• req.cookies 申请蕴含的 cookies
• req.query 申请的 query 参数
• req.body 申请体

是不是很相熟，没错就是 express.js 的一些性能。

API 配置

除了 export 默认的处理函数解决申请外，还可 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;

留神点

另外须要留神的是，如果配置了 pageExtensions，API 文件的命名也会受影响。

还有如果同时存在 pages/api/route/[param].js 和 pages/api/route/[param1].js 不晓得会发什么什么，回头有空试试。

总结

应用 next.js 的 API routes，咱们能够间接在我的项目中编写 nodejs 后端代码，轻松实现全栈开发。

再多说几句，通过这么多年的倒退，前后端终于拆散了，然而最近几年，前端又开始干起后端的活，梦回 php、jsp。古人云的好：风水轮流转，前后不分家。