next项目打包踩坑antd组件的message导致document未定义？

由于next项目是服务端渲染，所以它的某些功能在本地运行时没问题，但打包上线是不被允许的。看报错信息

 
   Generating static pages (21/43)  [=== ]ReferenceError: document is not defined
    at flushNotice (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:90:28)
    at typeOpen (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:222:3)
    at staticMethods.<computed> [as error] (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:246:12)
    at v (C:\Users\Administrator\Desktop\react-users\react-users-admin\.next\server\pages\note.js:1:8562)
    at Wc (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)

Error occurred prerendering page "/note". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at flushNotice (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:90:28)
    at typeOpen (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:222:3)

Error occurred prerendering page "/note". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at flushNotice (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:90:28)
    at typeOpen (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:222:3)
Error occurred prerendering page "/note". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at flushNotice (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:90:28)
    at typeOpen (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:222:3)

ReferenceError: document is not defined
    at flushNotice (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:90:28)
    at typeOpen (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:222:3)
    at staticMethods.<computed> [as error] (C:\Users\Administrator\Desktop\react-users\react-users-admin\node_modules\antd\lib\message\index.js:246:12)
ReferenceError: document is not defined

> Export encountered errors on following paths:
        /note

打包是预编译已经完成，但是所有的问题都指向antd的message组件

在 Next.js 中，antd 的 message 组件（以及其他依赖 document 或 window 的浏览器特定 API 的组件）确实不能在服务端渲染（SSR）中使用。这是因为服务端渲染的代码运行在 Node.js 环境中，那里并没有 document 和 window 对象，所以任何依赖这些对象的代码都会引发错误。

为什么 message 组件不能在服务端渲染使用

• 依赖浏览器特定对象：message 组件需要访问 document 对象来渲染提示信息，而在服务端渲染的过程中，document 是不存在的。
• 服务端和客户端渲染：服务端渲染的目的是生成静态 HTML 页面，这些页面在用户加载时会由客户端 JavaScript 提升为动态页面。浏览器特定的操作（如显示提示信息）只能在客户端完成。

实际上我之前正常使用message组件是没有问题的 ，也打包成功上传过。那么就只能是目标文件的message组件的错误了，注意看这块代码：它没有写在useEffect里面，也不是函数代码块里面的。这就是问题所在，如果这段代码在服务器端执行时被调用，message.error 会尝试访问 document 对象，但在服务器端 document 是未定义的，所以会导致 ReferenceError: document is not defined 错误。

解决方案如图

使用useEffect :服务器端渲染：在服务器端渲染时，任何依赖于浏览器的 API 的逻辑都应该在 useEffect 或类似的客户端钩子中处理。确保它只在客户端环境中执行。