我想在页面或布局读取 cookie 之前在中间件文件中的传入请求上设置/更新 cookie，但它似乎不起作用。也许这是不可能的..
我做了一个演示项目，你可以从 github 克隆： https://github.com/TJBlackman/nextjs-middleware-set-cookies-test
// middleware.ts
import type { NextRequest } from "next/server";
export async function middleware(request: NextRequest) {
console.log(`running middleware....`, request.method, request.url);
request.cookies.set("x-middleware-test", "some test value?!"); // <- this line should set a cookie that can be read by layout/page??
}
// layout.tsx
import { cookies } from "next/headers";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const cookieStore = cookies();
const testCookie = cookieStore.get("x-middleware-test");
return (
<html lang="en">
<body>
<h1>Layout cookie: {testCookie?.value || "Not Found"}</h1>
{children}
</body>
</html>
);
}
// page.tsx
import { cookies } from "next/headers";
export default function Home() {
const cookieStore = cookies();
const testCookie = cookieStore.get("x-middleware-test");
return (
<main>
<h2>Page cookie: {testCookie?.value || "Not Found"}</h2>
</main>
);
}
问题是您应该使用
NextResponseNextRequest所以
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
console.log(`running middleware....`, request.method, request.url);
const response = NextResponse.next();
response.cookies.set("x-middleware-test", "some test value?!");
return response;
}
摆脱
asyncawait