Next.js使用react-p5时报ReferenceError: window is not defined如何解决

问题原因 #

Next.js 默认开启服务端渲染（SSR）/静态站点生成（SSG），页面和组件会先在 Node.js 服务端环境执行一次构建逻辑，而 react-p5 和 p5.js 本身强依赖浏览器端的 window 对象，服务端环境没有这个全局变量，因此抛出该错误。

解决方案 #

你只需要用 Next.js 提供的 dynamic 导入工具，禁用 P5JsComponent 的服务端渲染即可，修改 homepage.tsx 代码如下：

import Head from "next/head";
import dynamic from "next/dynamic";

// 动态导入P5组件，关闭服务端渲染
const P5JsComponent = dynamic(() => import("@/components/P5JsComponent"), {
  ssr: false,
  // 可选：加载过程中显示的占位内容
  loading: () => <p>加载画布中...</p>
});

function homepage() {
  return (
    <div>
      <Head>
        <title>My App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
       <P5JsComponent />
    </div>
  );
}

export default homepage;

修改后不需要改动你原来的 P5JsComponent 代码，直接运行即可正常渲染p5画布。因为关闭SSR后，这个组件只会在用户浏览器端加载执行，此时window对象已经存在，不会再触发报错。

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