最新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请求方法（如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 Example

export 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 route
  const 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 route
  return 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 here
  session: {
    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 in
    console.log("Session", JSON.stringify(session, null, 2));
    return new Response("Welcome authenticated user", {
      status: 200,
    });
  } else {
    // Not Signed in
    return 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 }
  });
}