Next.js中引入依赖window对象的库（如dat.gui）的问题

首先纠正你对动态导入的误解：Next.js里的动态导入（无论是原生import()还是框架提供的dynamic函数）依然会参与构建打包，只是会将这部分代码标记为仅在客户端执行，不会在服务端渲染阶段运行，不存在“等页面脚本加载后才导入”的性能损耗问题——打包产物会提前生成，只是按需在客户端触发加载执行。

下面是几种可行的实现方式，既能将dat.gui纳入打包，又能规避服务端的window is not defined错误：

方式一：在客户端生命周期中动态导入 #

利用useEffect仅在客户端执行的特性，在组件挂载后动态导入dat.gui：

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(async () => {
    // 仅在客户端执行导入与初始化
    const dat = await import('dat.gui');
    const gui = new dat.GUI();
    
    // 这里添加你的gui配置逻辑，比如：
    const params = { color: '#ff0000' };
    gui.addColor(params, 'color');
    
    // 组件卸载时清理gui
    return () => gui.destroy();
  }, []);

  return <div>你的页面内容</div>;
}

方式二：用Next.js的dynamic函数封装客户端组件 #

如果gui逻辑比较复杂，可以封装成独立组件，再通过dynamic函数禁用服务端渲染：

1. 创建客户端组件DatGuiControl.js：

import * as dat from 'dat.gui';
import { useEffect } from 'react';

export default function DatGuiControl() {
  useEffect(() => {
    const gui = new dat.GUI();
    // 配置你的控件
    const settings = { speed: 0.5 };
    gui.add(settings, 'speed', 0.1, 2);
    
    return () => gui.destroy();
  }, []);

  return null; // 该组件无需渲染DOM
}

2. 在页面中导入该组件：

import dynamic from 'next/dynamic';

// 禁用服务端渲染，仅在客户端加载组件
const DatGuiControl = dynamic(() => import('../components/DatGuiControl'), { ssr: false });

export default function Home() {
  return (
    <div>
      <h1>Next.js + dat.gui</h1>
      <DatGuiControl />
    </div>
  );
}

方式三：全局判断客户端环境（不推荐，但可行） #

如果你坚持想要静态导入dat.gui，可以通过环境判断避免服务端执行初始化逻辑：

import * as dat from 'dat.gui';
import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    // 确保仅在客户端初始化
    if (typeof window !== 'undefined') {
      const gui = new dat.GUI();
      // 配置逻辑
    }
  }, []);

  return <div>页面内容</div>;
}

这种方式虽然能静态导入，但dat.gui的代码会被打包进服务端bundle（只是不会执行），不如前两种方式高效，所以更推荐前两种方案。

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