Next.js 13 Middleware技术问题咨询（官方文档资料不足）

1. NextResponse.next() 理解验证 #

你的理解完全正确。NextResponse.next() 和 Express 中的 next() 作用一致，调用后会让请求继续流转至后续中间件、API 路由或页面组件，确保请求能到达最终处理端点。

2. NextResponse 相关疑问解答 #

• NextResponse.redirect() 返回后请求是否无法到达终点？
  正确。一旦在 Middleware 中返回 NextResponse.redirect()（或其他直接返回响应的方法），请求处理流程会立即中断，响应直接返回客户端，后续端点不会再接收该请求。

• 为什么 NextResponse.redirect() 会触发页面刷新？
  因为 redirect() 本质是返回 HTTP 3xx 重定向响应（默认是 307 临时重定向），浏览器收到这类响应后会自动发起新请求到目标地址，这个过程会触发页面刷新。而客户端路由跳转（如 next/navigation 的 redirect 函数）是前端内部跳转，不会刷新页面，但 Middleware 是在服务端处理请求，返回的是标准 HTTP 重定向，因此会触发浏览器刷新。

• rewrite 的作用是什么？
  Rewrite（重写）的核心是在服务端内部修改请求的目标路径，但客户端完全感知不到路径变化。简单来说，就是用户访问路径 A，Middleware 把请求转发到路径 B 处理，但客户端地址栏仍显示路径 A，不会有跳转提示。
  常见场景：隐藏真实 API 路径、实现动态路由映射、在不改变客户端 URL 的前提下切换后端服务。比如用户访问 /posts/123，Middleware 用 NextResponse.rewrite(new URL('/api/posts/123', request.url))，服务器会处理 /api/posts/123 的逻辑，但客户端地址栏还是 /posts/123。

• Cookie 相关问题

  • 可以设置 Cookie 过期时间，通过 Set-Cookie 头的 Expires 或 Max-Age 参数配置。
  • 在 Middleware 中返回 Cookie 的两种方式：

    // 方式1：通过 headers 设置
    const response = NextResponse.next();
    // 设置1小时后过期（Max-Age 单位为秒）
    response.headers.set('Set-Cookie', 'user_id=123; Path=/; Max-Age=3600; HttpOnly');
    return response;
    
    // 方式2：用 NextResponse.cookies 方法（Next.js 13.2+ 支持）
    const response = NextResponse.next();
    response.cookies.set({
      name: 'user_id',
      value: '123',
      expires: new Date(Date.now() + 3600 * 1000), // 1小时后过期
      path: '/',
      httpOnly: true
    });
    return response;
    

3. 响应处理疑问解答 #

你遇到的问题核心是：Middleware 返回的响应如果针对页面请求，浏览器会直接渲染响应内容；而 API 路由返回的响应是供客户端代码（如 fetch、axios）捕获处理的。

原因分析 #

当用户直接访问页面路由（如 /dashboard），Middleware 拦截后返回 401 的 JSON 响应，浏览器会把这个 JSON 当作页面内容直接显示。但如果是客户端代码发起的 API 请求（如登录时调用 /api/auth/login），API 路由返回的 JSON 会被客户端代码捕获，而非直接渲染到页面。

解决思路 #

• 页面请求鉴权失败：不要返回 JSON，改用 NextResponse.redirect() 跳转到登录页；
• API 请求鉴权失败：返回 JSON 响应即可，客户端代码能正常捕获。

示例代码（区分页面与 API 请求处理）：

export function middleware(request) {
  const isAuthenticated = false; // 替换为实际鉴权逻辑
  const isApiRequest = request.nextUrl.pathname.startsWith('/api');

  if (!isAuthenticated) {
    if (isApiRequest) {
      // API 请求返回 JSON 响应
      return new NextResponse(
        JSON.stringify({ success: false, message: "authentication failed" }),
        { status: 401, headers: { "content-type": "application/json" } }
      );
    } else {
      // 页面请求跳转到登录页
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  return NextResponse.next();
}

如果需要在页面请求中传递错误提示，可通过重定向 URL 参数实现：

// Middleware 中
return NextResponse.redirect(new URL('/login?error=auth_failed', request.url));

// 登录页组件中读取参数
'use client';
import { useSearchParams } from 'next/navigation';

export default function LoginPage() {
  const searchParams = useSearchParams();
  const error = searchParams.get('error');
  return (
    <div>
      {error === 'auth_failed' && <p>认证失败，请重新登录</p>}
      {/* 登录表单 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者BlackWatch021