Next.js 如何避免警告：预期服务器HTML包含匹配的<；按钮>；在<；部门>；

我试图将Zoom集成到我的网站中。我正在使用NextJS。 前面有一个错误-窗口未定义。我知道服务器不能有窗口对象，因此发生此错误。我已经修复了错误，但不确定这是否正确。我觉得这是一个骇客：）。如果有人能给我建议，我会非常感激的。 即使给出了修复，我还是看到了一个我想要避免的警告。 警告：服务器HTML中应包含匹配的。 同样，这是因为服务器生成的代码没有按钮，但在客户端，它会呈现按钮。这是修复的一部分。有什么好办法克服这个问题吗？ 供你参考

我运行应用程序时也有两个错误

GET http://localhost:3000/node_modules/@zoomus/websdk/dist/css/bootstrap.css net::ERR_ABORTED 404 (Not Found)
TestPage:1 GET http://localhost:3000/node_modules/@zoomus/websdk/dist/css/react-select.css net::ERR_ABORTED 404 (Not Found)

但这两个文件都存在于文件夹中

---

您应该将导入移到组件外部

constzoom=dynamic（（）=>import（“../components/Zoom/Zoom”），{ssr:false}）；

同时确保使用

下一步/Link

中的链接，而不是

@material ui/core

pages/TestPage.js

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{Button}”；
从“下一个/动态”导入动态；
const Zoom=dynamic（（）=>import（“../components/Zoom/Zoom”），{ssr:false}）；
功能测试页（道具）{
const[zoomMeeting，setZoomMeeting]=useState（false）；
const[loadClientContents，setLoadClientContents]=useState（false）；
常数startzoommeting=（）=>{
setZoomMeeting（！zoomMeeting）；
};
useffect（（）=>{
setLoadClientContents（！loadClientContents）；
}, []);
const getContent=（）=>{
{
返回缩放会议(
) : (
变焦呼叫
);
}
};
返回{getContent（）}；
}
导出默认测试页面；