我的编程空间,编程开发者的网络收藏夹
学习永远不晚

react框架next.js学习之API 路由篇详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

第一种很好理解,就是会处理发送到 /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 =  `
    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。古人云的好:风水轮流转,前后不分家。

以上就是react框架next.js学习之API 路由篇详解的详细内容,更多关于react框架next.js API路由的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

react框架next.js学习之API 路由篇详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

HarmonyOS学习路之开发篇—Java UI框架

上两篇文章已经介绍了大部分的Java UI组件 ,因为时间关系把一个内容分为了三个部分,这是最后一篇组件的介绍。分别介绍ListContainer、ScrollView和WebView。

vue router学习之动态路由和嵌套路由详解

动态路由允许根据用户输入或服务器响应生成路由。VueRouter通过占位符语法实现此功能,嵌套路由允许创建具有层次结构的应用程序。动态嵌套路由进一步提供了基于输入生成嵌套路由的能力。除了这些功能外,VueRouter还提供了路由参数化、别名、过渡效果和导航守卫等其他功能。
vue router学习之动态路由和嵌套路由详解
2024-04-25

编程热搜

目录