乐趣区

关于前端:一起来学-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) 其它响应体,能够是 stringobjectBuffer
  • 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.jsAPI 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;

留神点

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

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

总结

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

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

退出移动版