React中按钮绑定onClick报错，添加'use client'的原因是什么？

你的问题核心在于Next.js App Router的组件默认渲染规则，下面给你拆解具体原因：

1. Next.js App Router的默认行为 #

在Next.js 13+的App Router体系中，所有组件默认是服务器组件——这类组件在服务器端完成渲染，不会被发送到用户浏览器中执行。

服务器组件有明确的功能限制：

• 不能使用浏览器专属API（比如alert()、window对象）
• 不能绑定交互事件（比如onClick、onChange）
• 不能使用React状态（useState）、副作用（useEffect）等客户端专属Hook

2. 你的代码触发了哪条限制？ #

看你的MyButton组件：

• 绑定了onClick点击事件，这是需要在浏览器端响应用户操作的交互逻辑
• 事件处理函数里调用了alert()，属于浏览器环境提供的API

这些都是服务器组件不允许的操作，所以会直接触发报错。

3. 'use client'的实际作用 #

在文件顶部添加'use client'，本质是给组件打了一个标记：这个组件是客户端组件，需要在用户浏览器中执行。

一旦标记为客户端组件：

• 组件会被打包发送到浏览器，在用户的浏览器环境中运行
• 可以正常绑定交互事件、调用浏览器API、使用React客户端Hook
• 你的onClick和alert逻辑自然就能正常工作了

4. 更合理的优化建议 #

你不需要给整个Home组件添加'use client'，只给需要交互的MyButton单独添加即可（能保留Home作为服务器组件的渲染优势，比如更快的初始加载速度）：

'use client'; // 仅给MyButton添加标记

function MyButton() {
  function handleClick() {
    alert('You clicked the button.')
  }
  return (
    <button className="bg-sky-500 mt-2 rounded-md p-2" onClick={handleClick}>Click Me!</button>
  );
}

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