Next.js中间件的使用探索

至于为啥探索，因为牵扯到一些新的东西，广泛搜索查不到对胃口的，只能自行探索记录。

中间件是啥？

Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.

中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。

创建文件

创建middleware.js文件

import { NextResponse } from "next/server";

// 尝试写一下中间件，中间件主要作用是：在请求完成之前修改对请求的响应。
export function middleware(request) {
    console.log("抓到了路由名单上的request", request.nextUrl.pathname);

    return NextResponse.next();
}

export const config = {
    // 适配器：筛选出特定的路径允许中间件执行
    matcher: "/views/:path*",
};
// => 抓到了路由名单上的request /views/today

放置文件

官网

Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.

翻译

使用项目根目录中的文件 middleware.ts（或 .js）来定义中间件。例如，与页面或应用程序处于同一级别，或者在 src 内部（如果适用）

我的项目要放在src中是起效的。

引入NextResponse

import { NextResponse } from "next/server";
import { validateUserToken } from "./lib/validateUserToken";

export function middleware(request) {
    console.log("抓到了路由名单上的", request.nextUrl.pathname);

    if (request.nextUrl.pathname.startsWith("/views")) {
        if (!validateUserToken()) {
            return NextResponse.rewrite(new URL("/"));
        }
    }
    if (request.nextUrl.pathname.startsWith("/signin")) {
        if (validateUserToken()) {
            return NextResponse.rewrite(new URL("/views/today"));
        }
    }

    return NextResponse.next();
}

export const config = {
    matcher: ["/views/:path*", "/signin"],
};

一些API

见名知意，不知意可看官网。

cookies
- get
- getAll
- set
- delete
redirect()
rewrite()
next()

重定向和重写

 URL 重写（URL rewriting）和重定向（redirect）是两个在 Web 开发中经常被使用的概念，它们的作用是改变浏览器请求的 URL，但它们的实现方式和作用略有不同。

实现↓

redirect重定向

URL 重写是指将浏览器请求的 URL 路径或参数进行修改，以便于服务器端能够识别和处理请求。例如，将 http://example.com/user?id=1 的请求路径重写为 http://example.com/user/1，这样服务器端就可以通过解析 URL 路径来获取用户 ID。

1	NextResponse.redirect(new URL('路径', req.url))

不好意思下面这块跟上面没啥联系，看错了，但是觉得有意思，先放在这吧

重定向类型

URL 重定向则是指当浏览器请求一个 URL 时，服务器告诉浏览器将请求转到另一个 URL。重定向可以分为两类：永久重定向（301 Moved Permanently）和临时重定向（302 Found）。永久重定向表示请求的 URL 已经永久移动到了另一个 URL，搜索引擎会把原有的权重转移到新的 URL 上；而临时重定向表示请求的 URL 只是暂时性地移动到了另一个 URL，搜索引擎会继续保留原有的权重。

永久性重定向
- HTTP 301 设置服务器端重定向
- HTTP 308
- meta refresh 设置meta refrash重定向
- HTTP刷新
- JS location
- Crypto重定向
临时重定向
- HTTP 302 设置服务器重定向
- HTTP 303
- HTTP 307
- meta refrash 设置meta refrash重定向
- HTTP refrash

rewrite重写

1	NextResponse.rewrite(new URL('路径', req.url))

两者区别

 URL 重写主要是为了方便服务器端的处理， URL 重定向主要是为了更好的用户体验和搜索引擎优化(我去，什么大坑)。