Next.js中使用PizZip库遇'window is not defined'错误的解决方法

问题 #

在Next.js项目中结合Docxtemplater使用PizZip库时，出现window is not defined错误，且构建过程中也会触发该错误。

原因分析 #

查看PizZip库源码后发现，它内部直接依赖了window对象。而Next.js的预渲染阶段（服务端渲染/静态生成，页面加载前执行）不存在浏览器环境的window对象，因此代码执行时抛出错误。另外，最初将使用这两个库的模态组件放在了layout.js中，而layout.js属于服务端组件，会在预渲染阶段执行，直接触发了该错误。

解决办法 #

将使用PizZip和Docxtemplater的模态组件从layout.js迁移到客户端组件（在组件文件顶部添加'use client'指令），迁移后功能正常运行。

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