Next.js onClick处理器配置问题：alert报错与console.log输出异常

1. 为什么会出现"alert is not defined"错误？ #

alert是浏览器环境特有的API，服务器端（Node.js环境）并没有这个全局对象。Next.js默认采用服务端渲染（SSR），如果你的组件是服务器组件（Next.js 13+ App Router默认就是），组件的代码会先在服务器端执行一遍，此时调用alert就会因为找不到这个对象而报错。

另外，即使是Pages Router的组件，如果你在组件的顶层代码（比如函数体直接调用）里写alert，也会在服务器渲染阶段触发错误，因为服务器端无法执行浏览器API。

2. 为什么console.log输出在服务器控制台？ #

同样源于SSR机制：组件在服务器端渲染时，顶层的console.log会在服务器环境执行，所以输出会出现在启动Next.js的终端（服务器控制台）里。只有当代码在客户端浏览器环境执行时，console.log才会出现在浏览器的开发者工具控制台中。

解决方法 #

核心思路是确保依赖浏览器API的代码只在客户端环境执行，以下是两种常用方案：

方案一：标记为客户端组件（Next.js 13+ App Router推荐） #

在组件文件的最顶部添加'use client'指令，将组件转为客户端组件。客户端组件的代码只会在浏览器端执行，所有浏览器API都能正常使用：

'use client';

export default function ClientButton() {
  const handleClick = () => {
    alert('弹窗正常显示了！');
    console.log('这条日志会出现在浏览器控制台');
  };

  return <button onClick={handleClick}>点击测试</button>;
}

方案二：判断客户端环境（兼容全版本Next.js） #

通过typeof window !== 'undefined'判断当前是否在浏览器环境，或者用useEffect钩子（useEffect的回调只会在客户端执行）：

import { useEffect, useState } from 'react';

export default function TestButton() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 这个回调只会在客户端执行
    setIsClient(true);
  }, []);

  const handleClick = () => {
    if (isClient) {
      alert('弹窗正常显示');
      console.log('这条日志在浏览器控制台');
    }
  };

  return <button onClick={handleClick}>点击测试</button>;
}

注意：在App Router中，服务器组件不能包含交互逻辑（比如onClick处理器），必须转为客户端组件才能添加事件监听，这也是你写了onClick后出现错误的原因之一。

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