NextJS v14中间件设置请求Cookie无效问题求助

我尝试在Next.js 14的middleware文件中，在页面或Layout读取Cookie之前设置/更新Cookie，但操作后发现无法生效，想确认这个需求是否可以实现？

演示代码如下：

// 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?!"); // <- 此行设置的Cookie应能被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>
  );
}

问题原因 #

直接修改request.cookies不会生效，因为request对象的Cookie存储是只读的请求快照，修改它不会影响后续页面/Layout渲染时获取的Cookie上下文。Next.js要求必须通过返回NextResponse对象来设置Cookie，这样Cookie才会被注入到请求上下文和客户端浏览器中。

解决方案 #

修改middleware.ts，创建NextResponse实例并通过它设置Cookie，最后返回该响应：

// middleware.ts
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
  console.log(`running middleware....`, request.method, request.url);
  // 创建继续执行后续路由的响应对象
  const response = NextResponse.next();
  // 在响应中设置Cookie，可配置路径、安全性等参数
  response.cookies.set("x-middleware-test", "some test value?!", {
    path: "/", // 确保Cookie在全站生效
    httpOnly: true, // 可选，限制前端JS读取，提升安全性
    secure: process.env.NODE_ENV === "production", // 生产环境仅在HTTPS下传输
  });
  return response;
}

修改后，页面和Layout中的cookies()方法就能正常读取到x-middleware-testCookie。这是因为：

• NextResponse.next()会创建一个允许后续路由继续执行的响应
• 通过response.cookies.set()设置的Cookie，会同时被添加到服务器端请求上下文和客户端的Set-Cookie响应头中
• 页面/Layout渲染时，cookies()获取的是经过中间件处理后的请求上下文Cookie

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