最新Next14 路由处理器 Route Handlers

四、使用Next路由处理程序

Next.js Route Handlers

I. Next中路由处理程序是什么

​ 路由处理程序是在用户访问站点路由时执行的功能。它们负责处理对定义的URL或路由的传入HTTP请求,以生成所需的数据。从本质上讲,当用户访问Next.js应用程序中的特定页面或URL时,相应的路由器会处理用户创建的请求并返回相应的响应,从而呈现所需的内容。

Next.js中的路由处理程序可以有几种形式:

  • 从页面文件导出的函数作为中间件拦截传入的请求

  • 自定义服务器端函数,用于处理Web应用程序中指定路由的请求和响应

​ 总体而言,路由处理程序是Next.js的重要组成部分,允许我们定义自定义路由逻辑并以灵活高效的方式处理传入请求。

​ 使用最新版本创建新的Next.js应用程序现在api目录放置在app文件夹中。这些路由处理程序提供了处理各种请求和响应的内置函数,允许开发人员为特定路由指定自定义行为。这允许更大的灵活性和对如何处理路由的控制,包括重定向到其他页面和提供数据响应。

​ 有了这个新功能,我们在app目录中创建API请求处理程序,可以通过创建HTTP请求方法(如GETPOSTPUT等)匹配的函数并导出。

路由解析注意:

  • 它们不参与布局或客户端导航
  • 在与route.js相同的路由上不能有page.js文件。

II. 创建新的API路由

​ 要创建一个新的API路由,请在app/api目录中创建一个文件夹,并使用路由的名称。在其中,创建一个导出HTTP请求的route.js函数;在本例中,我们将创建一个名为"test"的路由。为此,请在test目录中创建一个新的app/api文件夹,创建一个route.js文件,并向其中添加以下代码:

// In this file, we can define any type of request as follows:
// export async function GET(Request) {}
// export async function HEAD(Request) {}
// export async function POST(Request) {}
// export async function PUT(Request) {}
// export async function DELETE(Request) {}
//  A simple GET Exampleexport async function GET(Request) {return new Response("This is a new API route");
}

运行项目,访问localhost:3000/api/test。这将产生类似于下图的结果:

在这里插入图片描述

III. 构建嵌套路由和动态路由

​ Next 支持动态 API 路由。要创建动态 API 路由,在app/api文件夹中为路由创建username文件夹并定义动态路由。在本例中,我们将在app/api/username目录中创建一个动态路由[user]。然后,在[user]路由中,创建一个包含以下内容的route.js文件:

export async function GET(request, { params }) {// we will use params to access the data passed to the dynamic routeconst user = params.user;return new Response(`Welcome to my Next application, user: ${user}`);
}

要访问这个API,请打开http://localhost:3000/api/username/[your username]代替用户名。请记住,您可以输入任何字符串-例如,http://localhost:3000/api/username/eric。这将产生以下结果:

在这里插入图片描述

​ 在Next.js中创建嵌套API非常简单。要创建嵌套路由,首先在app/api中定义父API路由。添加到创建的父路由中的任何路由都被视为嵌套路由,而不是单独的路由。

​ 在上面的例子中,我们创建了一个username路由,并在其中嵌套了一个动态路由[user]。在app/api/username中,我们可以在route.js中定义父路由,如下所示:

export async function GET(request) {// username parent routereturn new Response("This is my parent route");
}

我们可以通过URL localhost:3000/api/username访问父路由,如下所示:

在这里插入图片描述

访问定义的嵌套路由http://localhost:3000/api/username/[your username]将产生先前的结果。

IV. 创建安全路由

​ 要在Next.js中创建安全路由,需要中间件函数在允许访问路由之前对路由请求进行身份验证和授权。定义安全路由通常遵循一个非常标准的模式。

​ 首先,创建一个中间件函数,它检查传入的请求头、cookie、查询参数等,并确定用户是否被授权访问所请求的资源。如果用户未被授权,应用程序将返回401403状态。

​ 我们可以使用中间件功能定义我们想要保护的路由。下面,我们展示了一个使用NextAuth.js创建的安全路由的示例。先安装对应的包:

npm install next-auth

​ 安装好后,我们可以在api目录中创建一个安全的API路由。首先,我们将使用其提供者定义身份验证选项。创建一个文件夹auth,并在此文件夹中添加一个新文件[…nextauth].js。该文件将包含您选择的任何身份验证措施的选项。

例如,使用Google身份验证提供程序,该选项将定义如下:

import NextAuth from 'next-auth';
import GoogleProvider from "next-auth/providers/google";
const authOptions = {providers: [GoogleProvider({clientId: process.env.CLIENT_ID,clientSecret: process.env.CLIENT_SECRET,authorization: {params: {prompt: "consent",access_type: "offline",response_type: "code"}}})],// Add your session configuration heresession: {jwt: true,}
};
export default NextAuth(authOptions);

对于安全路由,在api目录中创建一个新文件夹session,并将要保护的路由添加为route.js文件。在session/route.js中,添加以下内容:

import { getServerSession } from "next-auth/next";
import authOptions from "../auth/[...nextauth]";
export async function GET(Request) {const session = await getServerSession(authOptions);if (session) {// Signed inconsole.log("Session", JSON.stringify(session, null, 2));return new Response("Welcome authenticated user", {status: 200,});} else {// Not Signed inreturn new Response("Unauthorized access detected", {status: 401,});}
}

现在,尝试访问/api/sesssion路由将显示以下结果:

在这里插入图片描述

在这里,应用程序返回响应Unauthorized access detected,状态代码为401

V. Next.js路由器处理程序中的动态和静态生成函数

​ 除了路由函数外,Next 还提供了使用服务器端动态路由函数的功能,如cookie,header和重定向。当访问定义的路由时,在服务器端执行动态函数。

​ 这最适合处理数据上传或请求和访问数据库等任务。通过将路由器处理程序函数定义为动态的,开发人员可以确保更好的性能,因为该函数仅在访问指定路由时执行,从而防止不必要的服务器端处理。

​ 另一方面,静态路由处理程序允许开发人员为指定的路由生成静态内容,这些内容在构建时创建。这对于包含不经常更改的内容的频繁访问的路由特别有用,因此可以提前预呈现。

​ 使用静态函数,开发人员可以减少服务器端处理动态函数的负载,动态函数是为定义的路由生成内容所必需的。正确使用动态和服务器端函数可以使应用程序的性能更高。在解释了动态和静态函数之后,让我们来看看这两个类别下的示例:静态路由器和动态路由器。

静态路由器

在本例中,我们将使用GitHub搜索用户API。对app/api/username目录中的route.js进行以下更改:

import { NextResponse } from 'next/server';
export async function GET() {const res = await fetch("https://api.github.com/search/users?q=richard&per_page=3");const data = await res.json();return NextResponse.json(data);
}

在上面的代码块中,我们向GitHub搜索API执行了一个GET请求,并返回了一个包含三个用户名为"richard"的响应。导航到username路线将产生类似于下图的结果:

在这里插入图片描述

动态路由器

对于动态服务器端功能,我们可以使用cookie、重定向和头。要使用重定向,我们需要为import依赖项添加redirect并指定重定向URL。例如,我们可以在username路由中创建一个重定向URL,如下所示:

import { redirect } from "next/navigation";
const name = "John Doe";
export async function GET(Request) {redirect(`http://localhost:3000/api/username/${name}`);
}

在这里,我们将用户重定向到动态[user]路由,并传递沿着一个name变量。重定向也可以与外部URL一起使用到其他网页。

使用服务器端函数,我们还可以指定路由头。这在需要为不同路由指定不同头的情况下特别有用,特别是当路由需要不同的授权承载或身份验证令牌时,如下所示:

// Import for the headers dependency
import { headers } from 'next/headers';
export async function GET(Request) {const useHeader = headers(Request);const header = useHeader.get('content-type');return new Response('We are using the content-type header!', {status: 200,headers: { 'content-type': header }});
}

在上面的代码块中,我们使用了来自headersnext/headers函数来从传入的request对象中获取传递给路由器的头。然后,我们使用Route函数中的GET方法来提取content-type参数的值。

最后,我们创建一个状态为200的新响应,并将头设置为Request头的值。Next 13.2中路由头的一个主要改进是,它们现在可以根据传入请求的响应或正在获取的数据动态执行。

参考链接:

  • Using Next.js Route Handlers

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

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

相关文章

vim手册(vim cheatsheet)

vim手册(vim cheatsheet) 1. 命令模式 1). 移动光标 在命令模式下,可以使用以下命令来移动光标: - h:向左移动一个字符。 - j:向下移动一行。 - k:向上移动一行。 - l:向右移动一个…

Docker 从构建开始导出一个镜像

docker build docker build命令用于从Dockerfile创建一个镜像。它的基本格式如下: docker build [OPTIONS] PATH | URL | -这里的PATH是Dockerfile所在的路径,URL是一个Git仓库地址,-表示从标准输入读取Dockerfile。 docker build命令的一…

chatglm3-6b部署及微调

chatglm3-6b部署及微调 modelscope: https://modelscope.cn/models/ZhipuAI/chatglm3-6b/filesgithub: https://github.com/THUDM/ChatGLM3镜像: ubuntu20.04-cuda11.8.0-py38-torch2.0.1-tf2.13.0-1.9.4v100 16G现存 单卡 安装 软件依赖 pip install --upgrade pippip ins…

使用IDEA让文本对比不在变的困难

文章目录 前言操作1、IDEA与电脑磁盘任意文件的比较2、项目内部的文件比较3、剪切板比较4、IDEA本地历史比较5、IDEA版本历史对比 前言 在日常实际开发当中我们常常会对一些代码或内容进行比对查看是否有差异,这个时候不需要借用第三方比对插件,在IDEA中…

2022 icpc杭州站 C. No Bug No Game - 背包dp

题面 分析 能拿整个 p i p_i pi​的就拿整个的,不能拿了可以拿一部分的,因此可以分成0和1两种情况,0表示拿整个的,1表示还可以拿部分的,两种情况放在一起做一遍01背包,找到最大价值。 代码 #include &l…

git笔记

git常见命令 git init :初始化本地仓库,会生成一个.git文件,该文件用于管理和追踪该本地仓库,只有在git仓库下的文件才能被管理! git config user. name "用户名” git config user. email " 邮箱” git config -1 :列出当前git仓库…

老李测评:网络电视盒子哪个好?双十一必看电视盒子推荐

大家好,我是测评人老李,双十一大促期间我们都在买买买,本期老李要分享的数码产品推荐是电视盒子,为了推荐更客观,老李购入了各平台热销的十几款电视盒子,通过两周的对比后,整理了这份电视盒子推…

java后端debug排查问题思路

问题排查思路 这里说的是主要是debug以及线上问题排查的思路. 解决问题的步骤 确认环境、确定问题、复现问题、查看日志、定位问题 、解决问题 确认环境/url/参数 确认是哪个环境。 是开发环境,测试环境,还是生产环境。 如果问题是在测试环境&…

class类默认导出,header字段在请求中的位置

这是封装好的,没封装的如下 如果没有用uni.post那么就是如下的结构 let header {Content-Type: application/x-www-form-urlencoded,tenant: MDAwMA, } request({url:/sal/formula/validFormula,method:post,data:{},header })

音乐免费下载mp3格式+音频格式转换+剪辑音频+合并音频教程

1.在qq音乐网页版搜索想要的歌曲 qq音乐网站:https://y.qq.com/ 如果你是vip可以直接下载vip的歌曲,如果不是选择不是vip的歌曲进行第一步的操作 2.点击播放进入页面后F12拿到音频地址 然后双击src里面的音频地址复制 网页新标签打开赋值的这个链接&a…

iptables 放开http典型配置

要在 iptables 中放开 HTTP(端口80)的典型配置,您需要执行以下步骤: 检查当前的 iptables 规则: 首先,您可以使用以下命令查看当前的 iptables 规则,以确保没有冲突的规则: sudo ipt…

Gitlab服务器配置LDAP指导

ssh登录gitlab服务器:192.168.1.203修改配置文件 sudo su vim /etc/gitlab/gitlab.rb找到ldap_enabled和ldap_servers关键字并修改参数 保存配置文件并重新载入配置 gitlab-ctl reconfigure检查ldap相关配置是否成功(列出前100个用户,若没…

BIM、建筑机器人、隧道工程施工关键技术

一、BIM简介 (一)BIM概念 BIM(Building Information Modeling),建筑信息模型。该技术通过数字化手段,在计算机中建立虚拟建筑,该虚拟建筑提供从单一到完整、包含逻辑关系的建筑信息库。信息库…

福建地区等保测评怎么做

福建地区等保测评怎么做?福建地区等保测评是指在福建地区对网络安全等级保护进行评估的过程。网络安全已经成为现代社会一个重要的议题,各个行业和领域都面临着越来越多的网络安全风险和威胁。为了保护信息系统的安全性和可靠性,各地区都制定…

基于全阶模型磁链观测器的异步电机矢量控制的学习

导读:异步电机直接矢量控制需要通过磁链观测器来获取同步角,用于控制过程中的坐标变换。同时,磁链观测器输出的估计磁链用于磁链PI调节器闭环控制。所以磁链观测器在矢量控制中显得尤为重要。 如果需要文章中对应的仿真模型,关注…

C语言实现输出9*9口诀

完整代码&#xff1a; // 输出9*9口诀 #include<stdio.h>int main(){//i代表九行for (int i 1; i < 10; i){//j代表每行有几列for (int j 1; j <i; j){printf("%d*%d%d ",j,i,i*j);}printf("\n");}return 0; } 运行截图&#xff1a;

安防监控EasyCVR视频汇聚平台使用海康SDK播放时,画面播放缓慢该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…

SpringBootWeb案例——Tlias智能学习辅助系统(2)

前一节已经实现了员工信息的条件分页查询以及删除操作。 这一节继续完成新增员工、文件上传、修改员工、配置文件的功能。 目录 新增员工文件上传简介本地存储阿里云OSS介绍与入门项目集成阿里云(难点) 修改员工查询回显修改员工 配置文件参数配置化(Value)yml配置文件Configur…

Hive谓词下推

Hive谓词下推 1、情景描述2、Hive谓词下推2.1、什么是谓词下推2.2、Hive谓词下推 3、谓词下推规则4、谓词下推场景分析 1、情景描述 在实际数仓开发中&#xff0c;我们经常会遇到多表关联&#xff0c;这个时候就会涉及到where与on的使用 Hive中的where与on在HQL中的区别为&…

【ARM Coresight OpenOCD 系列 2 -- OpenOCD 脚本语法详细介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 swj-dp.tcl 介绍1.1.1 source [find target/swj-dp.tcl]1.1.2 swj-dp.tcl catch 命令介绍1.1.3 mem_helper.tcl 文件介绍1.1.4 变量名检查1.1.5 设置大小端模式1.1.6 设置 flash 烧录用到的 ram 空间1.1.7 设置…