将SurveyJS与Nextjs一起使用

Question

众所周知，NextJS使用的是服务器端渲染，我想将SurveyJs与之一起使用，但surveyJS使用的是一些必须在客户端执行的函数。在我的情况下，我想使用StylesManager.applyTheme，但它引发了ReferenceError: document is not defined的服务器错误

我可以用什么可能的方式在客户端执行applyTheme函数？

Answer 1

您可以通过创建一个useEffect挂钩来实现这一点，该挂钩使用一个外部函数来应用这个主题：

import {useEffect} from 'react'
useEffect(() => {
const newSurveyCreator = new SurveyJSCreator.SurveyCreator('surveyCreatorContainer', surveyCreatorConfig);

newSurveyCreator.saveSurveyFunc = function() {
console.log(this);
console.log(this && this.text);
};

updateSurveyCreator(newSurveyCreator);
}, []);

Answer 2

为了更好地实现，我使用从NextJs的动态导入解决了这个问题

相反，我导入了我的SurveyComponent，如下所示：

const SurveyComponent = dynamic(
() => import("../../../../components/survey/PartOne"),
{
ssr: false,
}
);

确保我的SurveyComponent不会在服务器端渲染。