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

目录
  • 正文
  • 使用方式
  • API 路由匹配
  • API 处理
  • API 配置
  • 边缘计算支持
  • 自定义 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。古人云的好：风水轮流转，前后不分家。

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

赞 (0)

相关推荐

  • 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 getServerSideProps源码解析

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

  • Next.js脚手架完整搭建封装的方法步骤

    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

  • 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实现在线Excel的详细代码

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

  • 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学习笔记之修饰符详解

    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实现移动端二级路由嵌套详解

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

  • Larave框架通过sanctum进行API鉴权详解

    Larave框架通过sanctum进行API鉴权详解

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

随机推荐