济南网站优化费用,个人简历word免费模板,discuz插件,网站建网站建设公司四、使用Next路由处理程序 Next.js Route Handlers I. Next中路由处理程序是什么
路由处理程序是在用户访问站点路由时执行的功能。它们负责处理对定义的URL或路由的传入HTTP请求#xff0c;以生成所需的数据。从本质上讲#xff0c;当用户访问Next.js应用程序中的特定页…四、使用Next路由处理程序 Next.js Route Handlers I. Next中路由处理程序是什么
路由处理程序是在用户访问站点路由时执行的功能。它们负责处理对定义的URL或路由的传入HTTP请求以生成所需的数据。从本质上讲当用户访问Next.js应用程序中的特定页面或URL时相应的路由器会处理用户创建的请求并返回相应的响应从而呈现所需的内容。
Next.js中的路由处理程序可以有几种形式 从页面文件导出的函数作为中间件拦截传入的请求 自定义服务器端函数用于处理Web应用程序中指定路由的请求和响应
总体而言路由处理程序是Next.js的重要组成部分允许我们定义自定义路由逻辑并以灵活高效的方式处理传入请求。
使用最新版本创建新的Next.js应用程序现在将api目录放置在app文件夹中。这些路由处理程序提供了处理各种请求和响应的内置函数允许开发人员为特定路由指定自定义行为。这允许更大的灵活性和对如何处理路由的控制包括重定向到其他页面和提供数据响应。
有了这个新功能我们在app目录中创建API请求处理程序可以通过创建HTTP请求方法如GET、POST、PUT等匹配的函数并导出。
路由解析注意
它们不参与布局或客户端导航在与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、查询参数等并确定用户是否被授权访问所请求的资源。如果用户未被授权应用程序将返回401或403状态。
我们可以使用中间件功能定义我们想要保护的路由。下面我们展示了一个使用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 还提供了使用服务器端动态路由函数的功能如cookieheader和重定向。当访问定义的路由时在服务器端执行动态函数。
这最适合处理数据上传或请求和访问数据库等任务。通过将路由器处理程序函数定义为动态的开发人员可以确保更好的性能因为该函数仅在访问指定路由时执行从而防止不必要的服务器端处理。
另一方面静态路由处理程序允许开发人员为指定的路由生成静态内容这些内容在构建时创建。这对于包含不经常更改的内容的频繁访问的路由特别有用因此可以提前预呈现。
使用静态函数开发人员可以减少服务器端处理动态函数的负载动态函数是为定义的路由生成内容所必需的。正确使用动态和服务器端函数可以使应用程序的性能更高。在解释了动态和静态函数之后让我们来看看这两个类别下的示例静态路由器和动态路由器。
静态路由器
在本例中我们将使用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?qrichardper_page3);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 }});
}在上面的代码块中我们使用了来自headers的next/headers函数来从传入的request对象中获取传递给路由器的头。然后我们使用Route函数中的GET方法来提取content-type参数的值。
最后我们创建一个状态为200的新响应并将头设置为Request头的值。Next 13.2中路由头的一个主要改进是它们现在可以根据传入请求的响应或正在获取的数据动态执行。
参考链接
Using Next.js Route Handlers
