Next.js 13服务器操作无法调用cookies的问题及求替代方案

问题场景 #

将Server Actions定义在独立文件并导入到客户端组件调用时，使用next/headers的cookies()或headers()会抛出错误：

Error: Invariant: Method expects to have requestAsyncStorage, none available

该问题仅在Server Actions位于独立文件时出现。

简洁解决方案 #

方案1：使用表单action属性触发（推荐）

Next.js官方推荐通过表单的action属性绑定Server Actions，这种方式会自动处理请求上下文传递，无需额外配置：

修改app/page.jsx：

"use client"
import myFunction from "@/actions.js"

export default function Page() {
  return (
    <form action={myFunction}>
      <button type="submit">my button</button>
    </form>
  )
}

actions.js保持原代码不变即可，此时cookies()能正常获取请求上下文。

方案2：升级Next.js到13.4+并使用命名导出

若需要保留onClick手动调用的方式，先将Next.js版本升级到13.4及以上（App Router稳定版），再调整Server Actions的导出方式为命名函数：

修改actions.js：

"use server"
import { cookies } from "next/headers"

// 改为命名导出
export async function myFunction() {
   const token = cookies().get("my-token")
   return "done"
}

修改app/page.jsx：

"use client"
// 导入命名函数
import { myFunction } from "@/actions.js"

export default function Page() {
   async function doSomething() {
      await myFunction()
   }

   return <button onClick={doSomething}>my button</button>
}

13.4版本修复了Server Actions在独立文件导入时的上下文传递问题，命名导出能更稳定地触发上下文绑定。

方案3：手动传递请求上下文（仅作备选）

如果上述方案无法满足需求，可通过在Server Action中接收Request对象来获取cookies，避免直接调用cookies()：

修改actions.js：

"use server"
import { NextRequest } from "next/server"

export async function myFunction(request) {
   // 从Request对象中提取cookies
   const token = request.cookies.get("my-token")
   return "done"
}

修改app/page.jsx：

"use client"
import { myFunction } from "@/actions.js"

export default function Page() {
   async function doSomething() {
      // 创建Request对象并传递
      await myFunction(new Request(window.location.href))
   }

   return <button onClick={doSomething}>my button</button>
}

这种方式需要手动构造请求对象，仅适合特殊场景使用。

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