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

2024-11-29 01:30:39

正文

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。古人云的好：风水轮流转，前后不分家。

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

next.js getServerSideProps源码解析

目录 SSR 处理动态加载处理总结 SSR 处理老规矩,昨天写了关于 getServerSideProps 的内容,今天趁热写一下 getServerSideProps 相应的源码,看看 next.js getServerSideProps 是怎么实现的,还有什么从文档无法知晓的细节. 我们先从 SSR 时相关的 getServerSideProps 处理看起,源码排查步骤上一步已经有所介绍,本篇不再多说,在 SSR 时,next.js 会调用 doRender 来进行渲染,其中会再次调用
next.js初始化参数设置getServerSideProps应用学习

目录使用 ts 定义 context 实现请求 API 问题特殊处理 - 404.跳转.异常总结使用 getServerSideProps 是 next.js 中的一项特色功能,可以让我们在给页面设置一些初始的 props 参数. getServerSideProps 是定义在页面中的 API,但是其执行环境是 node 端,而不是客户端,一般常见使用场景为: 页面前置权限校验页面必备参数获取使用时需要在对应的 page 文件中 export getServerSideProps
使用next.js开发网址缩短服务的方法

一.网址缩短服务的原理网址缩短服务,并不是压缩算法.而是把原网址存储在数据库中,用短的参数做key,届时取出原始url,并跳转. 因此,短网址最适合用key/value数据库. 那么,短网址的唯一参数,如何生成呢?其实用的就是10进制转62进制. function string10to62(number) { var chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split(''), radix
Next.js入门使用教程

目录简介创建Next.js项目手动创建Next.js项目 creact-next-app快速创建项目 Pages 路由 Link Router 参数传递与接收动态路由钩子事件获取数据 getStaticProps 构建时请求数据 getServerSideProps 每次访问时请求数据 CSS支持添加全局样式表添加组件级CSS 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架. 官网链接:www.nextjs.cn/ 优点: 零配置自动编译并打包.从一开始就
基于Next.js实现在线Excel的详细代码

目录认识 Next.js 实战之旅如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤?这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好. 我们需要考虑细节有很多,比如: 必须使用打包程序(例如 webpack)打包代码,并使用 Babel 等编译器进行代码转换. 需要针对生产环境进行优化,例如代码拆分.需要对一些页面进行预先渲染以提高页面性能和 SEO,可能还希望使用服务器端渲染或客户端渲染. 必须编写一些服务器端代码才能将 Re
Next.js脚手架完整搭建封装的方法步骤

针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用; 内容包括:(1)sass样式配置;(2)axios拦截封装;(3)action模块化;(4)reducer模块化;(5)redux搭建;(6)dispatch示范;(7)saga中间件配置;(8)saga拦截示范;(9)useEffect异步请求示范;(10)getServerSideProps/getStaticPr
react框架next.js学习之API 路由篇详解

目录正文使用方式 API 路由匹配 API 处理 API 配置边缘计算支持自定义 API 注意点总结正文 next.js 作为最热门的 react 框架,不过这么久了好像国内使用率一直不太高.最近在研究做个小项目正好做下笔记,有兴趣的可以一起来学习. next.js 首页标榜的 12 个特性之一就是 API routes,简单的说就是可以 next.js 直接写 node 代码作为后端服务来运行.因此我们可以直接使用 next.js 直接维护一个全栈项目,听起来很香的样子. 使用方式
Nest.js快速启动API项目过程详解

目录快速启动使用nest自带的命令行工具直接使用starter项目用npm安装所需的包创建controller 创建service 结构和命名 HTTP请求处理Axios对象配置全局添加headers API文档快速启动最近上了一个新项目,这个客户管理一个庞大的任务和团队集群,而不同流程所适用的系统也不太一样,比如salesforce,hubspots之类的.这次的新项目需要在另外两个平台之间做一些事情.目前只需要先封装其中之一的API,因此我们选定使用NodeJS的框架Ne
Java web基础学习之开发环境篇(详解)

Tomcat + Eclipse添加Java EE插件因为之前进行Java SE学习已经配置了JDK,安装了Eclipse for Java SE,所以选择了在Eclipse上添加插件的方式来配置Web开发环境 Tomcat是免安装版,直接解压即可: Eclipse中"帮助-安装新软件",work with处选择Mars - http://download.eclipse.org/releases/mars(注意对应自己版本): 选择Web.Java EE那个选项进行安装即可,如果报
Vue.js学习教程之列表渲染详解

本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
node.js学习之交互式解释器REPL详解

简介 repl是Node.js提供的一个Read-Eval-Print-Loop (REPL,读取-执行-输出-循环)实现,它即可以做为一个独立的程序使用,又可以包含在其它应用中使用.REPL是一个互式命令行解析器,它提供了一个交互式的编程环境,它可以实时的验证你所编写的代码,非常适合于验证Node.js和JavaScript的相关API. Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据
Vue.js学习笔记之修饰符详解

本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点"."连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安
vue.js学习之vue-cli定制脚手架详解

前言年初的时候公司的老后台系统实在难以维护和继续在其上开发了,因为这个系统被很多人写过页面,有前端有后端,编写前端代码时都非常随意,加之没有模块化,复用性和可维护性都极低,便下定决定,重新搞一套. 经过一段时间的调研选择了vue全家桶+elementUI来开发后台系统,让交互体验更好,让开发体验更好,让生产效率提高. 从零搭建其实考虑的事情还挺多的,比如: 如何管理代码仓库开发环境,测试环境搭建如何接入公司的打包上线流程如何目录划分如何划分模块登录和权限如何做这篇文章来记录下和脚手
yii2的restful api路由实例详解

yii\rest\UrlRule 使用yii\rest\UrlRule来自动映射控制器的 restful 路由,简单快捷,缺点是必须得按规定好的方法名去写业务. 映射的规则如下,当然,你可以修改源码为你的习惯: public $patterns = [ 'PUT,PATCH {id}' => 'update', 'DELETE {id}' => 'delete', 'GET,HEAD {id}' => 'view', 'POST' => 'create', 'GET,HEAD' =
react实现移动端二级路由嵌套详解

页面效果展示功能需求根据下面不同的标题切换不同的页面,请求接口数据,渲染页面数据,点击左侧数据,进入详情页面,在右侧图片中点击返回返回左面页面实现代码我们用到了react中的router,首先我们要下载react的路由,命令是 react-router-dom@5 --save 路由5版本跟6版本使用语法上略有区别,现在使用较多的是5版本我们首先在index.js文件中引入react路由,然后进行路由跳转 import { default as React } from 'react'
Larave框架通过sanctum进行API鉴权详解

目录目标步骤安装启动安装扩展包修改配置文件数据库迁移模拟数据添加访问路由测试获取token postman测试测试其他接口知识点补充1 知识点补充2 代码仓库目标 1.使用laravel框架进行用户的登录,注册,认证 2.前后端分离的情况下,用户请求接口,使用API token进行认证步骤安装启动 composer create-project laravel/laravel example-appcd example-app php artisan serve