大家好，我是一名FE架构师，虽然技术功能很差但就是不放弃，欢迎大家找我交流一起成长为真正的架构师。

前言

Next.js作为当下比较流行的React技术栈的Web框架，广为人知的可能是其SSR能力。但其在api路由的能力上一点也不输诸如Express.js、Koa等Nodejs Web 服务端框架。本文主要分享Next.js 14版本，其API Router在数据处理上是如何方便和快捷的。

一、URL参数

URL Query Parameters,是在URL链接后面携带一系列的参数，这种参数传递的方法在Web值十分常见，示例代码如下：

在上面的代码中可以看出，Next.js 将Query的数据封装成了标准的URLSearchParams对象，因此可以很方便的通过URLSearchParams对象来获取具体的参数。

URLSearchParams - Web APIs | MDNMDN Web DocsMDN logoMozilla logo

二、JSON数据

Web页面通过ajax请求以json的格式提交数据到服务端，也是非常常见的一个场景。相对于Express.js需要安装诸如body-parser之类的包才行，Next.js直接做了内置的处理，使用起来也是非常方便

三、form-data

在表单数据里面有个特殊情况，也就是文件上传。Next.js非常的贴心，无论是单纯的表单数据还是有file类型的表单数据，他都帮开发者做了内置处理，开发者使用起来也是非常的舒服。

export async function POST(req:Request){
	const form = await req.formData(); // 这里返回的是 FormData 对象（参考MDN）
  // 数据获取
  const name = form.get('name');
  // 文件处理(单个)
  const file = form.get('file'); // 这里返回的 File 对象(参考 MDN File对象)
  // 多文件
  const files = form.get('files');// 这里返回的是 Array<File>
  return Response.json({msg:'success'})
}
// 文件处理函数

File对象可以直接转为 ArrayBuffer，因此后续不管是本地存储还是其他操作都非常方便

async function fileHandler(file:File){
	let fileArrayBuffer = await file.arrayBuffer();
  // 转string
  fileArrayBuffer.toString();
  // 写本地文件
  fs.writeFile('test.xx',Buffer.form(fileArrayBuffer),(err)=>{
     // ...
  })
}

如何，Nextjs是不是帮开发者做了很多的集成，用起来的确非常方便，建议大家尝试。

四、使用raw data的方式实现单文件上传

这个是Nextjs中处理文件数据的另外一种方式，不过他只支持单文件，用起来也是非常方便

export async function POST(req:Request){
   const blob = await req.blob(); // nextjs 在 Web Request基础上的扩展
  return Response.json({msg:'success'})
}

Web页面发生一个 raw data

'use client'
import React from 'react';
export default function FileUpload() {
  async function handleFileUpload(event) {
    if (!event.target.files || event.target.files.length === 0) {
      return; // User canceled file selection
    }
    const file = event.target.files[0];
    await fetch('/api/file', {
      method: 'POST',
      body: file, // 这里就是用了raw data的方式，没有做任何处理
      headers: {
        'Content-Type': file.type,
      },
    });
  }

  return (
    <input
      type="file"
      onChange={handleFileUpload}
    />
  );
}

Tips

本文内容整合下面两个文字，想要更全面的了解可以详细阅读

1. Routing: Route Handlers | Next.js ，这是Next.js 官文，介绍Api Router Handler
2. Uploading Files in Next.js - Code Concisely ，这是一篇介绍文件上传的博客

预告

下周会分享《关于Next.js是否适合做BFF的思考》

点赞>评论>收藏