Next.js提供api接口

embedded/2025/3/16 6:05:09/

看react官网在推Next.js,所以简单学习了解一下

DEMO

   使用cna官方脚手架(13+版本)初始化项目以后目录如下:
在这里插入图片描述
可以看出,初始项目只有一个根路由页面page.tsx,想要增加一个纯粹的api route可以在app/目录下创建api/xxx/route.ts。即可访问api/xxx接口

export async function GET() {return Response.json({ message: "Hello World" });
}

api接口类型

可以通过定义函数名直接指定接口类型

route.ts

export async function GET(request: Request) {}export async function HEAD(request: Request) {}export async function POST(request: Request) {}export async function PUT(request: Request) {}export async function DELETE(request: Request) {}export async function PATCH(request: Request) {}// If `OPTIONS` is not defined, Next.js will automatically implement `OPTIONS` and set the appropriate Response `Allow` header depending on the other methods defined in the Route Handler.
export async function OPTIONS(request: Request) {}

参数类型

接口函数支持两个入参

import type { NextRequest } from 'next/server'export async function GET(request: NextRequest,{ params }: { params: Promise<{ team: string }> }
) {const { team } = await params
}

request

包括cookiesquerybodyrequest对象信息
在这里插入图片描述

context

context: {params: Promise<[x: string]: any>}
params是一个Promise类型的动态路由参数对象

ExampleURLparams
app/dashboard/[team]/route.js/dashboard/1Promise<{ team: ‘1’ }>
app/shop/[tag]/[item]/route.js/shop/1/2Promise<{ tag: ‘1’, item: ‘2’ }>
app/blog/[…slug]/route.js/blog/1/2Promise<{ slug: [‘1’, ‘2’] }>

详细配置参考

  • https://nextjs.org/docs/app/building-your-application/routing/route-handlers
  • https://nextjs.org/docs/app/api-reference/file-conventions/route

http://www.ppmy.cn/embedded/172984.html

相关文章

函数式编程定义

java.util.function包consumer用accept , supplier用get , predicate用test , function用apply 综合使用 // 串在一起&#xff0c;实现判断42这个字符串是奇数还是偶数 if (isNumber.test(supplier.get())) {// 说明是一个数字consumer.accept(change.apply(supplier.get())…

深度揭秘:蓝耘 Maas 平台如何重塑深度学习格局

目录 前言 深度学习&#xff1a;技术基石与发展脉络 蓝耘 Maas 平台&#xff1a;深度学习的强大助推器 1. 高性能算力支撑 2. 丰富的模型支持 3. 便捷的开发体验 4. 完善的安全保障 代码示例&#xff1a;蓝耘 Maas 平台上的深度学习实践 1. 注册与登录 2. 代码实现 …

Pytorch系列教程:可视化Pytorch模型训练过程

深度学习和理解训练过程中的学习和进步机制对于优化性能、诊断欠拟合或过拟合等问题至关重要。将训练过程可视化的过程为学习的动态提供了有价值的见解&#xff0c;使我们能够做出合理的决策。训练进度必须可视化的两种方法是&#xff1a;使用Matplotlib和Tensor Board。在本文…

深入理解TCP/IP网络模型及Linux网络管理

1. TCP/IP网络模型简介 TCP/IP&#xff08;传输控制协议/互联网协议&#xff09;是互联网的基础通信协议集。它分为四层&#xff0c;从上到下依次为&#xff1a; 应用层&#xff1a;处理高层协议&#xff0c;如HTTP、FTP等。传输层&#xff1a;负责端到端的通信&#xff0c;主…

Ubuntu中为curl和Docker配置代理

Ubuntu中为curl和Docker配置代理 在Ubuntu环境下工作时&#xff0c;经常需要使用代理来访问网络资源&#xff0c;尤其在网络受限或需要翻墙访问时。本文介绍如何分别为curl命令和Docker配置代理192.168.100.11:8000。 一、curl命令代理配置 方法1&#xff1a;临时设置代理&a…

二叉树题目

二叉树每层最大值 import java.util.*;class TreeNode {int val;TreeNode left;TreeNode right;TreeNode(int x) { val x; } }public class Solution {public List<Integer> max_num(TreeNode root) {List<Integer> result new ArrayList<>(); // 存储每…

智慧加油站小程序数据库设计文档

智慧加油站系统 - 数据库与API设计文档 1. 数据库设计 1.1 ER模型 系统的核心实体关系如下&#xff1a; 用户(User) ---< 订单(Order) ---< 加油记录(RefuelRecord)| | || | vv v …

清华北大推出的 DeepSeek 教程(附 PDF 下载链接)

清华和北大分别都有关于DeepSeek的分享文档&#xff0c;内容非常全面&#xff0c;从原理和具体的应用&#xff0c;大家可以认真看看。 北大 DeepSeek 系列 1&#xff1a;提示词工程和落地场景.pdf  北大 DeepSeek 系列 2&#xff1a;DeepSeek 与 AIGC 应用.pdf  清华 Deep…