如何使用 Next.js 和 SurveyJS 构建快速调查

在本文中，我们将介绍如何构建一个可用于创建新调查、分享调查并分析结果的网站。 您的网站将速度极快，并且对 SEO 友好，并依赖于Next.js中的所有最新功能。 得益于SurveyJS ，它还将灵活且易于构建，这使得调查工作变得毫不费力。

本文假设您了解React和Next.js的基础知识，但它将引导您完成如何构建网站的每个组件和页面。您可以按照文章的顺序查看所有代码，也可以跳到最后并使用此处的示例存储库。您还可以在此处查看我为您部署的网站的最终版本。

Next.js 是一个基于 React 的框架，可帮助您完全在 React 中构建全栈网站。Next.js 处理所有捆绑工作，并为您提供强大的 API 来决定如何呈现每个页面，以便快速呈现。在本文中，我们将确保所有页面都可以在构建时呈现。这意味着我们可以轻松公开 Google 可用于索引您的网站的站点地图，这对于确保您的 SEO 性能出色至关重要。

SurveyJS 是一款开源表单管理工具，可让您创建、共享和分析您的调查和表单。他们提供了一个 React API，我们将使用该 API 使用 Next.js 创建调查管理系统。

设置 Next.js

首先，让我们设置 Next.js 应用程序。使用 Next.js 非常快速和简单，因为它们提供了一个 CLI 工具，可让您根据提供的首选项创建一个基本应用程序。

要使用该工具，您需要确保已npx安装，然后运行以下命令：

npx create-next-app@latest

运行该create-next-app命令后，它会询问您一系列有关要创建的项目的问题。大多数问题完全基于个人偏好，因此您可以按照自己的喜好回答。在本文中，我们将使用纯 JavaScript（而不是 Typescript），并且我们还将使用Next.js 中的新应用路由器，而不是旧的文件路由器。

现在您已经设置了 Next.js 应用，您可以使用以下命令运行它：

yarn run dev

这将使你的开发服务器保持运行，当你更改文件时，它会更新。现在，让我们让它保持运行，这样我们就可以添加页面，而不必每次都重建。

设置 SurveyJS

要设置 SurveyJS，我们必须安装所有不同的依赖项。我们将使用 SurveyJS 的所有不同部分，包括表单创建器、表单显示和结果包，因此我们需要确保安装所有依赖项。

要安装软件包，请确保运行以下安装命令：

yarn add survey-analytics survey-core survey-creator-core survey-creator-react survey-react-ui

设置表单创建器

首先，让我们从添加表单创建器页面开始。我将在 上提供我的页面/creator，因此我创建了一个文件/creator/page.js。

创建者不需要任何服务器端数据来呈现，这意味着我们的页面组件非常简单；它只呈现我们的 Creator 组件，我将在后面概述。它看起来像这样：

export const metadata = {
  title: "Survey Creator",
};

export default function Page() {
  return <Creator />;
}

在上面的代码中，您可以看到我导出了页面和元数据对象。metadata然后 Next.js 将使用该对象作为 SEO 元标记。对于此页面，我们始终希望使用相同的字符串，因此我们只需导出一个对象即可。

组件Creator是我们实际使用 SurveyJS API 的地方。让我们看一下该组件：

"use client";

import { useEffect, useState } from "react";
import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";

export default function Creator() {
  let [creator, setCreator] = useState();

  useEffect(() => {
    const newCreator = new SurveyCreator({
      showLogicTab: true,
      showTranslationTab: true,
    });
    setCreator(newCreator);
  }, []);

  return <div>{creator && <SurveyCreatorComponent creator={creator} />}</div>;
}

您首先会注意到我们use client在此组件中使用了指令。这是因为 SurveyJS 组件并非设计为作为服务器组件运行。不过不用担心；它们仍将首先在服务器上呈现，然后再发送到客户端。

接下来您将看到，我们运行一个useEffect带有空依赖项数组的 。这意味着该函数将运行一次并创建SurveyCreator。您可以看到，此时我们可以根据要启用的功能将任何选项传递给创建者。

我们需要做的就是渲染SurveyCreatorComponent并将创建者对象传递给它。我们可选择渲染它，以便在创建者设置之前它不会中断。

您的开发服务器应该已经重新加载，因此如果您现在访问/creator，您将能够访问创建者并使用所有功能，如下面的屏幕截图所示：

创建页面来查看表单

接下来我们要创建一个页面来查看我们构建的表单。在设计器中创建表单后，输出将是一个 JSON 对象，其中包含您的问题和您在构建调查时设置的首选项，包括任何逻辑或样式。

对于我们的表单页面，我们希望使用动态设置，这样我们就可以呈现任意数量的表单页面，而不必为每个新表单创建一个新文件。我们通过使用 Next.js 动态路由来实现这一点。要创建动态路由，我们需要创建一个新文件，该文件/app/form/[slug]/page.js将为我们所有的表单提供一个单独的页面/form/form-slug。

在我们的新文件中，我们必须创建一些函数来支持 Next.js 创建我们的页面。首先，让我们从 开始generateStaticParams，我们可以使用它来告诉 Next.js 我们想要生成哪些页面。下面你可以看到该函数的内容：

export async function generateStaticParams() {
  return surveys.map((x) => ({ slug: x.slug }));
}

对于这个项目，我们设置了一个文件，该文件导出一个列表surveys（其中包含一个slug）和一个survey（这是调查设计器提供的对象）。如果我们想添加新的调查，我们只需在数组中添加另一个条目即可surveys。我们的generateStaticParams函数需要导出一个列表slugs，Next.js 将在构建时使用该列表来呈现我们的页面。对我们来说，这真的很容易；我们只需要映射我们的调查数组以适应格式：

export async function generateMetadata({ params }) {
  const survey = surveys.find((x) => x.slug === params.slug);

  return {
    title: survey.survey.title,
    description: survey.survey.description,
  };
}

我们将要看的下一个函数是generateMetadata。它从我们刚刚定义的静态 params 函数中获取参数，然后返回我们的标题和说明，它们用于我们网页上的元数据。如上所示，我们的函数根据slug我们给出的找到正确的调查对象。然后我们可以使用创建调查时编写的相同标题和说明。

我们需要在文件中定义的最后一件事page.js是 React 页面本身。我们的表单页面的页面组件也非常简单。它再次找到调查对象，然后将其传递给SurveyComponent：

export default function Page({ params: { slug } }) {
  const survey = surveys.find((x) => x.slug === slug);
  return (
    <div>
      <SurveyComponent surveyData={survey.survey} />
    </div>
  );}

thenSurveyComponent必须单独定义。看一下组件：

"use client";

import { useCallback } from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";

export default function SurveyComponent({ surveyData }) {
  const model = new Model(surveyData);

  const alertResults = useCallback(async (sender) => {
    fetch("/api/submit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
      body: JSON.stringify({ result: sender.data }),
    });
  }, []);

  model.onComplete.add(alertResults);

  return <Survey model={model} />;
}

再次，您会注意到，我们有一个use client指令来确保 Next.js 知道它不是服务器组件。然后，我们使用 SurveyJS 创建一个模型并将其传递给 SurveyJSSurvey组件。在执行此操作之前，您会注意到我们设置了一个onComplete函数。在我们的例子中，该函数只是将原始数据发送到/api/submit，然后可以在那里处理。

您可以使用 Next.js 创建 API 端点。在我们的例子中，我们可以通过在 处创建一个文件/api/submit/route.js并在其中放置一个 POST 函数来实现，如下所示：

export async function POST(request) {
  const res = await request.json();

  console.log(res);

  return Response.json({ message: "Done" });
}

在我们的例子中，该POST函数非常简单：它抓取发送的对象，然后将其记录到控制台并以消息进行响应。如果您有数据库，则需要在此处将结果保存到数据库中。您还可以选择进一步验证结果并返回结果以显示在前端。此时，如何处理数据完全取决于您。

创建页面来查看结果

现在我们已经建立了创建和显示表单的方法，我们需要建立查看从表单收集的结果的方法。显然，查看结果的一种方法是直接查看数据库，但这不会让您了解调查中出现的趋势。如果我们想识别趋势，我们可以使用该surveyjs-analytics包。

对于这个项目，我创建了一些虚假的结果数据，以便我们可以创建结果仪表板。我results为我们之前使用的每个调查对象添加了一个数组。每个结果看起来都像这样：

{
  "nps-score": 9,
  "disappointing-experience": [
    "The service is great, i highly recommend you use it.",
  ],
  "improvements-required": [
    "The service is great, i highly recommend you use it.",
  ],
  "promoter-features": ["ui"],
  rebuy: [true, false],
}

如您所见，每个结果只是一个对象，以问题 ID 作为键，以答案作为值。这正是我们onComplete在提交表单时从函数中获得的结果。

首先，我们要创建一个新的动态页面，因为我们要为每个不同的表单创建一个新的网页，以便我们可以专门显示该表单的结果。对于此页面，我们要在 处创建一个新文件/results/[slug]/page.js。

再次，我们想定义一个generateMetadata和一个，generateStaticParams就像我们显示表单一样。在我们的generateMetadata函数中，我们对标题做了一些调整，这样就清楚了我们看的是结果而不是表单本身。这次唯一的区别是，在我们的内部generateStaticParams，我们过滤了一些没有结果的表单，这样我们就不会为没有任何结果的表单生成页面。我们的generateStaticParams函数最终看起来像这样：

export async function generateStaticParams() {
  return surveys
    .filter((x) => x.results.length > 0)
    .map((x) => ({ slug: x.slug }));
}

同样，我们还想导出一个Page组件。我们的页面组件与上一节中的页面组件相同，只是我们渲染了组件Results。但我们仍然会执行 find 来获取正确的调查数据并将其传递给组件。

我们的Results组件加载所有必需的包，然后将它们渲染到页面上。它需要useEffect设置一些钩子，整个组件如下所示：

"use client";

import { useEffect } from "react";
import { Model } from "survey-core";

export default function Results({ surveyData }) {
  useEffect(() => {
    (async () => {
      const survey = new Model(surveyData.survey);

      const { VisualizationPanel } = await import("survey-analytics");

      const currentPanel = new VisualizationPanel(
        survey.getAllQuestions(),
        surveyData.results,
        {
          allowHideQuestions: false,
        }
      );

      currentPanel.render("surveyVizPanel");

      return () => {
        const panelElement = document.getElementById("surveyVizPanel");

        if (panelElement) {
          panelElement.innerHTML = "";
        }
      };
    })();
  }, [surveyData]);

  return (
    <div>
      <div id="surveyVizPanel" />
    </div>
  );
}

如您所见，我们再次从指令开始use client，原因与之前相同。组件以useEffect用于设置显示所有图表的面板的 开始。它首先使用surveyData定义调查本身的对象来创建Model。这让结果包知道要显示哪些图表，因为它可以理解每个问题。

接下来useEffect要做的事情是加载survey-analytics包。我们通过动态导入来执行此操作，因此在构建时不会加载它。这种方法可防止由包中的客户端特定代码引起的构建时错误。

获取所需的包后，我们设置包含所有问题的可视化对象，然后我们可以给它一个所有提交的列表，以便它进行查看并创建图表。此时，您可以使用提供的选项配置可视化。之后，您所要做的就是让面板对象知道在 DOM 中使用哪个 ID 进行渲染，在我们的例子中是surveyVizPanel，我们将进一步渲染。最后，我们必须确保为我们的钩子提供一个清理函数，以便它在完成后清除元素。

您会注意到，我们只将其传递给surveyData依赖项数组，以便只有在输入数据发生变化时才会重新渲染所有图形，如果我们在不同的结果页面之间链接，可能就会出现这种情况。

进一步的工作

本文为您提供了足够的信息，让您可以开始将 SurveyJS 集成到您的 Next.js 应用程序中。要拥有一个功能齐全的系统，您需要考虑添加某种身份验证系统，以确保只有经过验证的用户才能访问系统的不同部分。

您还需要集成某种数据源，以便创建者创建新表单并收集最终用户的结果。所有这些添加在 Next.js 和 SurveyJS 中都非常简单明了。

结论

本指南向您展示了如何使用 SurveyJS 在 Next.js 中构建全面的调查管理系统。使用 Next.js 可以立即获得很多好处，因此尽管您可能没有编写那么多代码，但您会发现您所创建的内容可以扩展到您想要的任意数量的表单，而不会遇到任何麻烦。