Nextjs : Error: `headers` was called outside a request scope. 是指在服务器组件之外调用headers吗?

Question

export function SignIn({
  provider,
  ...props
}: { provider?: string } & React.ComponentPropsWithRef<typeof Button>) {
  return (
    <form
      action={async () => {
        "use server";
        console.log("provider", provider);
        await signIn(provider);
      }}
    >
      <Button {...props}>Sign In</Button>
    </form>
  );
}

log 日志

 GET / 200 in 135ms
provider undefined
 ⨯ Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context
    at signIn (components\auth-components.tsx:13:20)
  11 |         "use server";
  12 |         console.log("provider", provider);
> 13 |         await signIn(provider);
     |                    ^
  14 |       }}
  15 |     >
  16 |       <Button {...props}>Sign In</Button> {
  page: '/'
}
 POST / 500 in 927ms
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 702ms (

问题

错误好像是说 headers 方法本应该在服务器组件中 调用,然而却request请求外部调用, 好像是说在客户端组件中被调用?
但是从代码来看 已经 use server 声明为服务器组件了, 为什么还会报错?
https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

Answer 1

您不能在 client component 中使用 'use server' 命令¹。
如果您在 auth-components.tsx 里使用了 'use client' 命令的话，需要在另外的文件中编写 server action，并在其文件开头标注 'use server'。

---

1. https://nextjs.org/docs/app/api-reference/directives/use-serv...