Next.js App目录使用useState报错：需标记'use client'为客户端组件

在Next.js的App Router架构下，所有组件默认都是服务器组件，而useState这类React客户端钩子仅能在客户端组件中运行，这就是报错的核心原因。

解决方法很直接：在使用useState的组件文件最顶部添加"use client";指令，这个指令必须放在所有代码（包括import语句）之前，明确告诉Next.js将该组件当作客户端组件处理。

修改后的代码示例：

"use client";
import { useState } from "react";

export default function Card() {
  const [state, setState] = useState("");

  return <></>;
}

添加该指令后，组件就能正常使用useState以及其他客户端专属的React特性（比如事件处理、useEffect等）。如果该组件的子组件没有单独标记服务器组件，也会默认继承客户端组件的属性。

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