【Next.js】怎样读取 POST body data？

最新推荐文章于 2023-12-19 17:55:15 发布
最新推荐文章于 2023-12-19 17:55:15 发布
阅读量970 收藏
点赞数 1
分类专栏： Next.js 文章标签： javascript 前端 json next.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/henryhu712/article/details/130580965
版权

在 Next.js 中 Post api 时，api收到的请求的 body 是一个可读流，不需要也不能用 JSON.parse(req.body) 的方法来获取数据。

要正确获取 body 数据，应使用下面的方法：

const body = await req.json()
亮子AI
关注
专栏目录
Next.js 13：服务器组件和应用程序目录的完整指南
我的博客，不一样的自我表达
06-04 932
事实上，使用新的 App Router，我们可以并行获取数据，并将其传递给页面组件：这比当前的路由系统有了实质性的性能改进。Next.js 13 中发布的新“app”目录是一种实验性的构建 Next.js 应用程序的新方法。通过使用括号，我们使目录site“无路径”，这意味着我们可以在目录中创建新的布局、加载文件和页面site，而无需向路由添加新的路径段。要在 Next.js 中的布局组件中获取数据，我们可以使用新的use钩子，这是 React 中的一个实验性钩子，用于Suspense在服务器上获取数据。
next.js+antd+egg.js+mysql构建我的博客系统
weixin_45621877的博客
09-02 1141
安装next，构建react服务端渲染框架 npm install create-next-app my-app 2.cd 进入my-app 3. 安装next能够使用css需要的条件 npm instal --save @zeit/next-css 在根目录下新建一个文件 next.config.js const withCss = require('@zeit/next-css') if(typeof require !== 'undefined'){ require.extensio.
使用 OpenAI API 构建 Next.js 应用程序的初学者指南
分享身边生活经验blog
03-21 857
欢迎阅读我们的初学者指南，了解如何使用 OpenAI API 构建 Next.js 应用程序。在本教程中，我们将引导您完成利用 OpenAI API 的功能创建功能强大且智能的 Next.js 应用程序的过程。Next.js 是用于构建服务器呈现的 React 应用程序的流行框架，而 OpenAI API 是将高级人工智能功能整合到您的应用程序中的强大工具。通过结合这两种技术，您可以创建一个功能强大且动态的 Web 应用程序，该应用程序可以随着时间的推移进行调整和改进。
nextjs框架服务端数据请求客户端获取数据插件
08-10
next.js框架服务端数据请求、客户端获取数据插件
官网《Next.js —— 为页面获取数据》
ab110911的博客
07-05 2529
现在我们知道如何创建一个像样的Next.js应用了，并且也充分使用了Next.js路由API。 在实践中，我们通常要从远程数据源获取数据。Next.js具备标准的获取数据的API，那就是成为同步函数的'getInitialProps'.用这个函数，我们就能从远程获取数据，并且以属性的方式传递回页面。我们能同时在客户端和服务端写入这个函数，所以，自然而然可以在两端使用。在这节课中，通过使用"get...
vue预渲染生成静态页面_静态第一：无服务器渲染的预生成JAMstack站点作为后备
CSS 初学者指南
07-10 251
您可能会看到术语JAMstack越来越频繁地弹出。 一段时间以来，我一直很喜欢这种方法。 JAMstack的原理之一就是预渲染。 换句话说，它可以将您的网站预先生成为一组静态资产，以便可以通过CDN或其他优化的静态托管环境以最快的速度和最少的开销将其提供给您的访客。 但是，如果我们要提前预生成我们的网站，我们如何使它们具有动态感？ 我们如何建立需要经常更改的网站？ 我们如何处理诸如用户...
react - next.js 设置body style
weixin_30552811的博客
05-08 1217
因为next.js可以用pages文件夹中的js文件进行route，所以不需要public文件夹和html，因此没有body tag。 body自带8px的maigin，我想要给整个页面设置背景颜色，想去掉body的margin。 尝试方法1： 给最上层div设置样式 margin: -8px; 上左右边距都可以抵消，但是底部仍有body的8px margin。 2： 搜...
nodejs（十一）获得post请求体 body-parser
徐海兴的专栏
10-20 8207
当请求参数在url中的时候，我们可以用request.query获得请求体，当请求内容不在url中时，我们需要借助一个body-parser依赖来获取请求体 var express = require('express') var app = express() var bodyParser = require('body-parser') //只要加入这个配置，在req请求对象上会多出来一个...
Next.js 热更新 Markdown 文件变更
「 虚幻私塾」
06-25 653
Next.js 提供了 Fast-Refresh 能力，它可以为您对 React 组件所做的编辑提供即时反馈。 但是，当你通过 Markdown 文件提供网站内容时，由于 Markdown 不是 React 组件，热更新将失效。解决该问题可从以下几方面思考：通过 模块递归的监控 目录，当文件发生变更，触发 listener 执行。 新建文件 监控 目录。 通知浏览器 服务端通过 WebSocket 与浏览器建立连接，当开发服务器发现文件变更后，通过 WS 通知浏览器更新页面。 浏览器需要知道被更新的
Next.js脚手架进阶 — 封装fetch && 增加中间件
weixin_33923148的博客
12-10 1898
Next.js脚手架进阶系列 完美契合ant-design 封装fetch && 增加中间件 部署上线 封装fetch 首先先来说一下为什么要用fetch而不是axios吧，主要有以下两点： 第一，我在另一个脚手架express-react-scaffold里使用的就是axios,秉着学习新东西的想法，想自己封装一下fetch。 第二，个人觉得fetch的功能更为强大，因为f...
Next.js设置body背景颜色没有效果react
weixin_44773981的博客
05-06 645
Next.js设置body背景颜色没有效果 查看_app.js的样式引入顺序 将body的这个样式放在最后，特别是引入antd是时候。 例如:common.css为设置body的样式 import MyApp from 'next/app' import 'antd/dist/antd.css' import '../styles/pages/common.css' export default MyApp 问题解决 ...
nextjs入门学习总结
qq_66879230的博客
11-07 541
在nextjs中需要使用useState等客户端API时，需要加上“use client”5.服务器端调取代码。
express next()函数及body-parser解析
weixin_47150940的博客
08-11 384
Next的作用 我们在定义express中间件函数的时候都会将第三个参数定义为next， 这个next就是我们今天的主角，next函数主要负责将控制权交给下一个中间件， 如果当前中间件没有终结请求，并且next没有被调用， 那么请求将被挂起，后边定义的中间件将得不到被执行的机会。 何时使用Next() 从上边的描述我们已经知道，next函数主要是用来确保所有注册的中间件 被一个接一个的执行，那么我们就应该在所有的中间件中调用next函数， 但有一个特例，如果我们定义的中间件终结了本次请求，那就不应该 再调
Next.js 学习笔记（四）——数据获取
最新发布
Jackson_Mseven的博客
12-19 1335
数据缓存是一个持久的。
从post请求体中获取请求参数的值
CuiGongZi的博客
09-22 4101
HttpServletRequest使用getInputStream()与getReader()获取输入流因为读取时数据流指针的单向移动导致请求的body内容只可读取一次。但是,现在项目大多设置了拦截器,过滤器,可能导致流已经被读取了,那么下次再去读的时候,就是空的了。如果是采用 form 表单的形式, 可以通过 getParameter 获取参数的值.那么如果 body 是按照 JSON 的格式来传递, 那么通过 getParameter 就获取不到参数的值了！
超超超认真的next.js学习笔记-获取数据
qq_45679015的博客
04-12 4876
浏览器访问网站的流程：输入一个网址，浏览器获取一个HTML页面，但这会页面没有数据，使用fetch发请求获取数据并使用useStates设置state，state发生变化，这是render函数再一次去渲染页面，因此这个流程中咱们有两个渲染周期。而我们使用next.js则是利用第一个渲染周期进行预渲染，减少首页白屏显示时间。 在next.js中文网中我们知道Next.js 有两种预渲染形式：静态生成和服务器端渲染 静态生成：如果一个页面使用了静态生成，在页面构建时将生成对应的HTML文件，意味着在生产环
postman中返回值提取_Postman入门第一坑：提取返回值
weixin_30276247的博客
02-28 1810
Test Toolson 2018-04-13|tags: PostmanInterfaceTestPostman是做接口测试的，但是很多接口并不是直接就能测，有的需要一些预处理。比如说身份认证，需要传递一个token。如果做网页测试，一般打开登陆界面的时候就会生成一个token，如果返回值是json格式，用Postman从中提取值是很简单的，在Tests中输入：var jsonD...
Next.js + TypeScript 搭建一个简易的博客系统
程序员成长指北
09-11 9981
最近想攻关一个 node.js 框架。希望找到一个能够帮我们把大部分事情都做好的框架，可以直接上手快速开发。不像传统的 Express、Koa 需要配置大量中间件。按照这个想法，谷歌了一...
js中使用post的方式发送请求
热门推荐
Java学习之旅
07-30 2万+
在javaScript中发送请求： 1、发送get请求：下面这两个方式都是get方式的发送请求 //直接设置新的url，这种方式跳转为get方式 //document.location = "/servlet/pageUpdateUser?usercode="+$("#usercode").text()+"&username="+$("#username").val(); //这种是DOM层面的页面跳转 window.liocation.href = url; //这种是实现窗...
node.js 调用AE
08-24
要在Node.js中调用AE（引用和）,你可以按照以下步骤操作： 1. 首先，创建一个新的`server.js`文件并导入所需的模块和包。你需要使用`const express = require('express')`导入Express框架，使用`const app = express()`创建一个Express应用程序。还可以使用`const cors = require('cors')`导入CORS模块，使用`const bodyParser = require('body-parser')`导入body-parser模块。确保你已经使用`npm install express cors body-parser`命令安装了这些依赖。 2. 在`server.js`文件中定义你的API接口。你可以使用`app.get('/', (req, res) => res.send('Hello!'))`创建一个GET请求的接口，用于返回"Hello!"的响应。你还可以使用`app.get('/get-test', cors(), (req, res, next) => res.json({ msg: 'This is a cros test.' }))`创建一个带有CORS的GET请求接口，用于返回一个包含消息的JSON响应。另外，你可以使用`app.post('/post-test2', cors(), (req, res, next) => { res.setHeader('Content-Type', 'text/plain'); res.write("your post is: \n"); res.end(JSON.stringify(req.body)); })`创建一个带有CORS的POST请求接口，用于返回一个包含请求正文的纯文本响应。 3. 在`server.js`文件的末尾，使用`app.listen(3000, () => console.log('Example app listening on port 3000!'))`来启动你的Express应用程序，监听3000端口。 这是一个简单的Node.js中调用AE的示例。你可以根据你的需求修改和扩展这个示例代码。确保你已经安装了`mongoose`模块，可以使用`npm install mongoose`命令进行安装。另外，还需要准备好一些数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Node.js之 express写后端接口](https://blog.csdn.net/qq_39835505/article/details/123372695)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [使用node.js对mongodb进行增删改查](https://blog.csdn.net/Cheng_XZ/article/details/108397096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值