Next.js中调用alert或给window赋值报错？解决方案已找到

Next.js采用服务端渲染（SSR）机制，服务端执行代码时不存在浏览器环境的window对象，直接在组件顶层、全局代码中调用window或依赖window的API（比如alert）就会触发报错。以下是有效的解决方法：

1. 确保代码仅在客户端环境执行 #

通过typeof window !== 'undefined'判断当前环境，或者利用React的useEffect钩子（useEffect中的代码只会在客户端渲染时执行）：

示例1：调用alert #

import Image from "next/image";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    alert('bruh');
  }, []);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
    </main>
  );
}

示例2：给window赋值 #

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    window.propertyOnWindow = "inb4 'you shouldnt assign properties to window'";
  }, []);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
    </main>
  );
}

也可以直接用条件判断包裹代码：

if (typeof window !== 'undefined') {
  alert('bruh');
  window.propertyOnWindow = "your value";
}

2. 用dynamic导入依赖window的组件 #

如果某个组件本身依赖window对象，可以使用Next.js的dynamic导入并禁用SSR，确保组件仅在客户端加载：

import dynamic from 'next/dynamic';

// 禁用SSR，组件只会在客户端渲染
const ClientOnlyComponent = dynamic(() => import('../components/YourComponent'), {
  ssr: false,
});

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ClientOnlyComponent />
    </main>
  );
}

3. 移除无效的webpack配置 #

你之前尝试的webpack配置无法解决问题——服务端环境本身不存在window，强行模拟只会引发更多异常，直接删除这部分配置即可。

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