通过0.0.0.0访问Next.js遇Cookie错误，localhost却正常？

问题本质 #

你虽然给Page组件加了"use server"标记，但直接在页面组件的顶层逻辑里修改cookie是错误的。Page组件作为服务器组件，它的顶层代码是在页面渲染阶段执行的，而修改cookie属于HTTP响应的一部分，必须在专门处理请求响应的逻辑里操作——也就是Server Action或者Route Handler。

为什么localhost和外部访问表现不一样？ #

这是Next.js的环境检测和优化机制导致的：

• 本地localhost访问时，开发环境的校验规则更宽松，或者页面被预渲染/缓存，修改cookie的代码没触发严格校验，所以没报错。
• 外部通过0.0.0.0访问时，不管是开发还是生产模式，Next.js会启用更严格的请求处理逻辑，检测到你在渲染阶段操作响应相关的cookie，直接抛出错误。

正确的实现方式 #

方案1：用Server Action处理（适合用户触发的场景） #

把修改cookie的逻辑封装成独立的Server Action，通过用户交互（比如按钮点击）来触发：

"use server";

import { cookies } from "next/headers";

// 定义Server Action函数
async function setUserCookie() {
  const cookieStore = cookies();
  cookieStore.set("anything", "something");
}

// 服务器组件
export default async function Page() {
  return (
    <form action={setUserCookie}>
      <button type="submit">设置Cookie</button>
    </form>
  );
}

方案2：用Route Handler处理（适合自动触发的场景） #

如果需要在用户访问时自动设置cookie，比如首次访问初始化，可以创建一个Route Handler：

// app/api/init-cookie/route.js
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export async function GET(request) {
  const cookieStore = cookies();
  cookieStore.set("anything", "something");
  // 重定向回首页
  return NextResponse.redirect(new URL("/", request.url));
}

之后可以在页面初始化时引导用户访问这个接口，或者在服务器组件里做重定向处理。

关于Server Action的补充 #

Server Action是Next.js里专门用来在服务器端处理用户交互的异步函数，它不能在组件顶层直接执行，必须通过表单action、useActionState钩子等方式触发。这样才能保证它在HTTP请求的响应阶段执行，正确操作cookie这类需要在响应头里设置的内容。

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