在 next.js app Directory 中，将中间件（middleware）处理后的数据传递给页面组件（page.tsx）是一个常见需求。本文将详细介绍如何通过在中间件中设置自定义请求头（custom headers），并在页面组件中安全地读取这些请求头，从而实现中间件与页面之间的数据共享，确保应用程序的逻辑流畅性和数据一致性。
理解 Next.js app Directory 中的数据流
Next.js 的 App Directory 引入了 react Server Components 的概念，极大地改变了数据获取和组件渲染的方式。中间件（middleware）在请求到达页面或 API 路由之前执行，它可以在这里进行认证、重定向或修改请求。而 page.tsx 文件通常作为 Server Component 运行，在服务器上渲染，并可以进行异步数据获取。
挑战在于，中间件和 page.tsx 虽然都在服务器端运行，但它们是不同的执行上下文。中间件处理请求并决定如何响应，而 page.tsx 接收请求并生成 ui。直接从中间件将 javaScript 变量传递给 page.tsx 并不直接支持。为了实现数据共享，我们需要利用 http 协议的特性，如请求头（Headers）或 cookies。
解决方案：通过自定义请求头传递数据
最推荐且清晰的方式是利用 HTTP 请求头。中间件可以修改即将传递给下一个处理程序（即 page.tsx 或 API 路由）的请求头，然后在 page.tsx 中读取这些修改后的请求头。
1. 在中间件中设置自定义请求头
在 Next.js 中，中间件函数接收 NextRequest 对象。为了修改请求并将其传递给下一个处理程序，我们需要使用 NextResponse.next() 方法，并传入一个包含修改后请求头的新请求对象。
以下是一个示例，展示如何在中间件中获取用户数据（例如，通过验证会话令牌），然后将用户 ID 或其他非敏感信息作为自定义请求头传递：
// middleware.ts import { NextRequest, NextResponse } from "next/server"; import { getUser } from "./lib/getUser"; // 假设这是您的用户获取逻辑 export async function middleware(request: NextRequest) { const sessionToken = request.cookies.get("session-token"); // 如果没有会话令牌，重定向到登录页 if (!sessionToken) { return NextResponse.redirect(new URL("/", request.url)); } // 尝试获取用户数据 const userRequest = await getUser(sessionToken.value); // 如果用户获取失败，重定向到登录页 if (userRequest.status !== 200) { return NextResponse.redirect(new URL("/", request.url)); } const userjson = await userRequest.json(); // 假设 userJson 包含 _id 和 email // 创建一个新的 Headers 对象，复制原始请求头 const requestHeaders = new Headers(request.headers); // 将用户 ID 作为自定义请求头添加到新的 Headers 对象中 // 注意：请求头通常用于传递字符串数据。如果需要传递复杂对象，请将其序列化为 JSON 字符串。 requestHeaders.set("X-User-ID", userJson._id); requestHeaders.set("X-User-Email", userJson.email); // 也可以传递整个用户 JSON，但要确保其大小在合理范围内 // requestHeaders.set("X-User-Data", JSON.stringify(userJson)); // 返回 NextResponse.next()，并将修改后的请求头注入到后续的请求中 return NextResponse.next({ request: { headers: requestHeaders, }, }); } export const config = { matcher: "/cfa/:path*", // 匹配所有 /cfa 路径下的请求 };
关键点说明：
- new Headers(request.headers)：这会创建一个新的 Headers 实例，并复制所有原始请求头。直接修改 request.headers 是不允许的。
- requestHeaders.set(“X-User-ID”, userJson._id)：使用 set 方法添加或更新自定义请求头。推荐使用 X- 前缀来表示自定义头，尽管这不是强制性的。
- NextResponse.next({ request: { headers: requestHeaders } })：这是最关键的一步。它告诉 Next.js 继续处理请求，但将 request 属性中的 headers 替换为我们修改后的 requestHeaders。
2. 在 page.tsx 中访问自定义请求头
在 page.tsx（或其他 Server Component）中，您可以使用 Next.js 提供的 headers() 函数来访问当前的请求头。这个函数只能在 Server Components 或 Server Actions 中使用。
// app/cfa/page.tsx import { headers } from "next/headers"; // 从 next/headers 导入 headers 函数 import { FormCreateLocation } from "@/components/forms/FormCreateLocation"; import { Location } from "@/components/resources/Location"; export default async function Home() { const requestHeaders = headers(); // 获取所有请求头 // 访问中间件设置的自定义请求头 // 注意：HTTP 请求头是大小写不敏感的，但通常在访问时会被转换为小写。 const userId = requestHeaders.get("x-user-id"); const userEmail = requestHeaders.get("x-user-email"); // 如果传递了完整的 JSON 字符串 // const userDataString = requestHeaders.get("x-user-data"); // const userData = userDataString ? JSON.parse(userDataString) : null; console.log("User ID from middleware:", userId); console.log("User Email from middleware:", userEmail); // console.log("User Data from middleware:", userData); // 根据获取到的用户数据进行页面渲染 // 例如，可以根据 userId 从数据库获取更详细的用户信息 // 或者直接使用 userEmail 来展示个性化内容 return ( <main className="p-4"> <h1>欢迎, {userEmail || "访客"}!</h1> <FormCreateLocation /> <div className="p-4"> <h2>选择一个地点</h2> <ul> {/* 示例地点 */} <Location _id="0333333333" name="Chick-fil-A Highway 22" number="03444" /> <Location _id="33222222222" name="Chick-fil-A Midtown" number="03253" /> </ul> </div> </main> ); }
关键点说明：
- import { headers } from “next/headers”;：这是在 App Directory 中获取请求头的标准方式。
- requestHeaders.get(“x-user-id”)：使用 .get() 方法通过键获取请求头的值。请注意，虽然在设置时可能是 X-User-ID，但在获取时通常需要使用小写形式 x-user-id，因为 HTTP 请求头键是大小写不敏感的，Next.js 会将其规范化为小写。
- 获取到的数据可以直接用于渲染，或者作为进一步数据获取的依据。
注意事项与最佳实践
- 数据敏感性： 不要将敏感数据（如密码、未加密的会话令牌）直接放入请求头中。请求头在网络传输中是可见的。对于用户 ID 或公共用户信息，这种方法是安全的。
- 数据大小限制： HTTP 请求头有大小限制（通常为几 KB）。如果需要传递大量数据，应考虑其他方法，例如将数据存储在服务器端缓存或数据库中，并在中间件中传递一个 ID，然后 page.tsx 再通过这个 ID 去获取完整数据。
- 类型安全： 从请求头获取的值始终是字符串。如果原始数据是数字、布尔值或对象，您需要在 page.tsx 中进行适当的类型转换（例如 parseInt(), JSON.parse()）。
- 错误处理： 在 page.tsx 中访问请求头时，始终考虑头可能不存在的情况，并进行相应的处理（例如，提供默认值或抛出错误）。
- 替代方案：Cookies： 虽然本文主要推荐使用请求头，但对于一些小型的、非敏感的数据，也可以考虑在中间件中设置 Cookie，然后在 page.tsx 中使用 cookies() 函数来读取。然而，Cookie 更适合存储客户端状态，而请求头更适合传递服务器端处理的请求上下文信息。
总结
在 Next.js App Directory 中，通过中间件设置自定义请求头，并在 page.tsx 等 Server Components 中读取这些请求头，是实现中间件与页面之间数据共享的有效且推荐的方法。这种方式利用了 HTTP 协议的原生机制，保持了代码的清晰性和可维护性，同时为服务器端的数据流提供了强大的灵活性。遵循上述指南和最佳实践，可以确保您的 Next.js 应用程序在处理数据流时既高效又安全。