Next.js API Routes：构建服务端功能

Next.js 的 API 路由允许你在 Next.js 应用程序中创建独立的服务端功能，这些功能可以处理 HTTP 请求并返回 JSON 数据或其他响应。API 路由位于项目中的 pages/api 目录下，每个文件都会映射到一个特定的 API 路径。

基本示例

pages/api/users.js

import type { NextApiRequest, NextApiResponse } from 'next';// 获取用户列表
export default async function handler(req: NextApiRequest, res: NextApiResponse) {if (req.method === 'GET') {const users = [{ id: 1, name: 'User 1' },{ id: 2, name: 'User 2' },{ id: 3, name: 'User 3' },];res.status(200).json(users);} else if (req.method === 'POST') {const user = req.body;// 假设这里有一个数据库连接// await addUserToDatabase(user);res.status(201).json({ message: 'User added successfully.' });} else {res.setHeader('Allow', ['GET', 'POST']);res.status(405).end(`Method ${req.method} Not Allowed`);}
}
  1. pages/api/users.js 文件定义了一个 API 路由，它将在 /api/users 路径上运行。
  2. handler 函数接收两个参数：req（NextApiRequest 对象，代表 HTTP 请求）和 res（NextApiResponse 对象，代表 HTTP 响应）。
  3. 当请求方法为 GET 时，函数返回用户列表（这里是一个硬编码的数组，实际应用中可能是从数据库查询）。
  4. 当请求方法为 POST 时，函数接收请求体中的用户数据，然后添加到数据库（这里只是模拟，实际应用中需要连接数据库）并返回成功消息。
  5. 如果请求方法不是 GET 或 POST，函数返回 405 方法不允许的错误。

Next.js API 路由默认处理 JSON 响应，但你也可以根据需要返回其他类型的内容。例如，如果你需要返回 HTML，可以使用 res.send 方法。

中间件与请求处理链

Next.js API 路由支持中间件模式，允许你在请求到达最终处理函数之前预处理请求或后处理响应。这可以用来验证请求头、鉴权、日志记录等。

Middleware 示例

假设我们想在所有 API 请求前验证一个 API 密钥：

// pages/api/middleware/authenticate.ts
export function authenticate(req: NextApiRequest, res: NextApiResponse, next: () => void) {const apiKey = req.headers['x-api-key'];if (!apiKey || apiKey !== process.env.API_KEY) {return res.status(401).json({ message: 'Unauthorized' });}next();
}

然后，在实际的 API 路由中使用此中间件：

// pages/api/users.js
import { authenticate } as middleware from './middleware/authenticate';export default async function handler(req: NextApiRequest, res: NextApiResponse) {authenticate(req, res, () => {// ...原有逻辑});
}

错误处理

良好的错误处理对于生产级应用至关重要。Next.js API 路由允许你自定义错误处理逻辑。

错误处理示例

export default async function handler(req: NextApiRequest, res: NextApiResponse) {try {// 假设这里可能会抛出错误const result = await fetchDataFromDatabase();res.status(200).json(result);} catch (error) {console.error('Error occurred:', error);res.status(500).json({ error: 'An error occurred while processing your request.' });}
}

类型安全

为了增强代码的健壮性和可维护性，利用 TypeScript 进行类型注解是个好习惯。

类型安全示例

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';type User = {id: number;name: string;
};export default async function handler(req: NextApiRequest, res: NextApiResponse<User[] | { message: string }>) {// ...
}

与外部服务交互

大多数 API 路由会与外部服务交互，比如数据库、第三方 API 等。这里展示如何使用 axios 发起 HTTP 请求。

首先安装 axios：

npm install axios

然后在 API 路由中使用：

import axios from 'axios';export default async function handler(req: NextApiRequest, res: NextApiResponse) {try {const response = await axios.get('https://api.example.com/data');res.status(200).json(response.data);} catch (error) {res.status(500).json({ error: 'Failed to fetch data from external service.' });}
}

定制路由与动态路由

Next.js API 路由不仅限于单一路径，还可以根据需要定制更复杂的路由结构，包括动态路由。

定制路由

如果你需要将多个相关的API端点组织在一起，可以创建子目录。例如，假设你正在构建一个博客API，你可以这样组织：

pages/api/blog/posts.ts          # 处理 /api/blog/posts 请求post/[id].ts       # 动态路由，处理 /api/blog/post/:id 请求
动态路由

动态路由允许你捕获URL中的一部分作为参数。在上面的例子中，[id] 是一个动态段，它会被实际的ID值替换。在处理函数中，你可以通过 req.query 访问这些动态参数。

动态路由示例 (pages/api/blog/post/[id].ts)
export default async function handler(req: NextApiRequest, res: NextApiResponse) {const { id } = req.query; // 获取动态IDif (!id) {return res.status(400).json({ message: 'Missing post ID' });}try {const post = await getPostById(id as string); // 假设这是从数据库获取文章的函数if (!post) {return res.status(404).json({ message: 'Post not found' });}return res.status(200).json(post);} catch (error) {console.error('Error fetching post:', error);return res.status(500).json({ message: 'Internal server error' });}}

API 路由缓存

为了提升性能，你可能需要对API响应进行缓存。Next.js自身不直接提供API缓存机制，但你可以借助第三方库如 swr（用于客户端缓存）或在服务器端使用Redis等缓存服务。

服务器端缓存示例（使用 Redis）

首先，安装 redis 和 ioredis：
npm install redis ioredis
然后，在API路由中使用Redis缓存数据：
import redis from 'ioredis';const redisClient = new redis(process.env.REDIS_URL);export default async function handler(req: NextApiRequest, res: NextApiResponse) {const { id } = req.query;let post;try {// 尝试从Redis获取缓存post = await redisClient.get(`post:${id}`);if (post) {post = JSON.parse(post);return res.status(200).json(post);}} catch (err) {console.error('Redis error:', err);}// 缓存中没有数据，从数据库获取post = await getPostById(id as string);if (post) {// 存储到Redis以便下次使用redisClient.set(`post:${id}`, JSON.stringify(post));res.status(200).json(post);} else {res.status(404).json({ message: 'Post not found' });}
}

CORS 支持

跨源资源共享（CORS）是Web安全的重要方面，Next.js API路由默认支持CORS。你可以通过配置来进一步控制CORS策略：

import Cors from 'cors'; // 安装 cors 库// 初始化 CORS 中间件
const cors = Cors({methods: ['GET', 'HEAD'],
});export default async function handler(req: NextApiRequest, res: NextApiResponse) {// 使用 CORS 中间件await new Promise((resolve, reject) => {cors(req, res, (result) => {if (result instanceof Error) {reject(result);} else {resolve(result);}});});// .

…后续处理逻辑
}

2500G计算机入门到高级架构师开发资料超级大礼包免费送！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/19839.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C++】Socket编程基础

【C++】Socket编程基础

文章目录 套接字通信类型名空间套接字函数socket()&#xff1a;创建套接字bind()函数&#xff1a;绑定服务器套接字与其地址、端口listen()函数&#xff1a;侦听客户连接connect()&#xff1a;连接套接字accept()函数&#xff1a;服务器接受连接&#xff0c;并为该连接创建一个…
阅读更多...
在 Vue 应用中下载.doc文档（或任何其他类型的文件）

在 Vue 应用中下载.doc文档（或任何其他类型的文件）

在 Vue 应用中下载.doc文档&#xff08;或任何其他类型的文件&#xff09; 在Vue应用中下载.doc文档&#xff08;或任何其他类型的文件&#xff09;通常涉及到后端提供一个文件下载的接口&#xff0c;前端通过发送请求到这个接口来触发文件下载。以下是如何在 Vue 中实现文件下…
阅读更多...
LC 旋转 - 模拟对象

LC 旋转 - 模拟对象

原文链接 链接 液晶 (LC) 旋转网格属性允许您以 theta、phi 为单位指定空间变化的 LC 导向。 液晶由杆状分子结构组成&#xff0c;这些分子结构具有相对于长轴的旋转对称性。因此&#xff0c;液晶具有空间变化的单轴光学特性。 相对于分子长轴和分子短轴的折射率称为非寻常 ne …
阅读更多...
Python生成requirements.txt的方法

Python生成requirements.txt的方法

在Python项目中，requirements.txt 文件通常用于列出项目所需的所有Python包及其版本。这样，其他人或系统可以轻松地安装所有必要的依赖项，以确保项目的正确运行。 以下是生成 requirements.txt 文件的几种方法： 方法1：使用 pip freeze 如果你的项目环境中已经安装了所有…
阅读更多...
《广告数据定量分析》第3版读书笔记之统计原理

《广告数据定量分析》第3版读书笔记之统计原理

1.点估计与区间估计：可用于求指标误差区间；（不常用） （1）总体比例的置信区间： 通过样本数据计算的比例，估计总体的对应比例的取值范围。主要适用于用户转化漏斗各环节的转化率估计，比如点击率、点击下载率、下载安装率、安装激活率等。 我们可以得到总体百分比的一个…
阅读更多...
cad编程软件怎么使用：深入探索与实用指南

cad编程软件怎么使用：深入探索与实用指南

cad编程软件怎么使用&#xff1a;深入探索与实用指南 CAD编程软件作为现代设计与制造领域的重要工具&#xff0c;其使用方法和技巧对于提高设计效率和质量至关重要。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;详细解析CAD编程软件的使用方法&#xff0c;帮助…
阅读更多...
SRS介绍及环境搭建

SRS介绍及环境搭建

1.SRS简介 SRS&#xff08;Simple Real-Time Media Server&#xff09;是一个开源的流媒体服务器&#xff0c;它支持多种流媒体协议&#xff0c;包括RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等57。SRS主要应用于直播、视频会议等场景&#xff0c;提供实时音视频服…
阅读更多...
【刷题（14）】二叉树

【刷题（14）】二叉树

一、二叉树基础 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* …
阅读更多...
【并发程序设计】12.内存映射

【并发程序设计】12.内存映射

12.内存映射 使一个磁盘文件与内存中的一个缓冲区相映射&#xff0c;进程可以像访问普通内存一样对文件进行访问&#xff0c;不必再调用read,write&#xff0c;更加高效。 用到的函数 mmap函数 原型&#xff1a; #include <sys/mman.h> void* mmap(void* start, size_…
阅读更多...
【GD32】05 - PWM 脉冲宽度调制

【GD32】05 - PWM 脉冲宽度调制

PWM PWM (Pulse Width Modulation) 是一种模拟信号电平的方法&#xff0c;它通过使用数字信号&#xff08;通常是方波&#xff09;来近似地表示模拟信号。在PWM中&#xff0c;信号的占空比&#xff08;即高电平时间占整个周期的比例&#xff09;被用来控制平均输出电压或电流。…
阅读更多...
MFC 解决Enter回车键和Esc取消键默认关闭窗口的三种方法

MFC 解决Enter回车键和Esc取消键默认关闭窗口的三种方法

文章目录 问题描述问题原因解决办法方法一&#xff1a;在重载的PreTranslateMessage 函数中屏蔽回车和ESC 的消息方法二&#xff1a;重载OnOK函数方法三&#xff1a;将所有按钮类型设为普通按钮&#xff0c;并设置其中一个按钮为默认按钮 问题描述 一般情况下编写的MFC对话框程…
阅读更多...
【笔记】Hugging Face上面的模型想直接使用的办法： .safetensors格式 可以直接转化为.gguf格式供本地（ollama）加载使用

【笔记】Hugging Face上面的模型想直接使用的办法： .safetensors格式 可以直接转化为.gguf格式供本地（ollama）加载使用

Link: https://huggingface.co/spaces/ggml-org/gguf-my-repo 原文&#xff1a;
阅读更多...
HTML语义化标签

HTML语义化标签

<header> 主要用于网页整体顶部&#xff0c;<article>头部&#xff0c;<section>头部 <nav> 导航&#xff0c;一般有主要导航&#xff0c;路径导航&#xff0c;章节导航&#xff0c;内容目录导航 <main> 网页主要区域&#xff0c;一般一个网页…
阅读更多...
【运维项目经历|025】企业高效邮件系统部署与运维项目

【运维项目经历|025】企业高效邮件系统部署与运维项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的问题 经验教训与自我提升 展望未来 项目名称 企业高效邮件系统部署与运维项目 项目背景 随着企业…
阅读更多...
男人圣经 13

男人圣经 13

男人圣经 13 进入大我《百忍诀》VS 训练出更高级的默认网络手眼通天 进入大我 现代世界最大的一个好处是给普通人提供了空前的机会。如果你能提供一种比别人好的产品或者服务&#xff0c;你就会脱颖而出。 而人分成大我&#xff08;神性基因&#xff09;、小我&#xff08;兽…
阅读更多...
大宋咨询(深圳产品价格调查)如何开展电子商品渠道价格监测

大宋咨询(深圳产品价格调查)如何开展电子商品渠道价格监测

开展电子商品渠道价格监测是当今电商时代的重要任务之一。随着电子商务的迅猛发展&#xff0c;电子商品的价格波动日益频繁&#xff0c;市场竞争也愈发激烈。为了解优化渠道管理策略&#xff0c;提升品牌竞争力&#xff0c;大宋咨询&#xff08;深圳市场调查&#xff09;受客户…
阅读更多...
【C#】转换8位或16位像素值为Bitmap

【C#】转换8位或16位像素值为Bitmap

1.转换16位像素值为Bitmap,不带颜色空间信息&#xff08;如RGB&#xff09;的16位图像 public static Bitmap Convert16BitGrayscaleToBitmap(byte[] grayscale16Data, int width, int height){// 创建一个8位灰度Bitmap用于存储转换后的图像Bitmap bitmap new Bitmap(width, …
阅读更多...
AI之下 360让PC商业生态大象起舞

AI之下 360让PC商业生态大象起舞

时隔7年&#xff0c;淘宝PC版在前不久迎来重磅升级&#xff0c;在产品体验、商品供给、内容供给等方面做了全面优化&#xff0c;以全面提升PC端的用户体验&#xff1b;当大家都以为移动互联网时代下APP将成为主流时&#xff0c;PC端却又成为了香饽饽。其实PC端被重视&#xff0…
阅读更多...
3389，为了保障3389端口的安全，我们可以采取的措施

3389，为了保障3389端口的安全，我们可以采取的措施

3389端口&#xff0c;作为远程桌面协议&#xff08;RDP&#xff09;的默认端口&#xff0c;广泛应用于Windows操作系统中&#xff0c;以实现远程管理和控制功能。然而&#xff0c;正因为其广泛使用&#xff0c;3389端口也成为许多潜在安全威胁的入口。因此&#xff0c;确保3389…
阅读更多...
go 针对 time类型字段，前端查询，后端返回数据格式为UTC时间

go 针对 time类型字段，前端查询，后端返回数据格式为UTC时间

测试代码 package mainimport ("context""log""net/http""time""github.com/gin-gonic/gin""go.mongodb.org/mongo-driver/bson""go.mongodb.org/mongo-driver/bson/primitive""go.mongodb.org/m…
阅读更多...
最新文章

Copyright @ 2022~2023