The way to Construct Lightning Quick Surveys with Subsequent.js and SurveyJS — SitePoint

On this textual content, we’ll stroll by means of assemble an internet site that you must benefit from to create new surveys, share your surveys, after which analyze the outcomes. Your web site is probably lightning quick and is probably site positioning good, counting on all the most recent decisions in Subsequent.js. It could even be versatile and simple to assemble attributable to SurveyJSwhich makes working with surveys easy.

This text will assume you perceive the fundamentals of React and Subsequent.js, nonetheless it’s going to stroll you thru assemble each ingredient and web net web page of the web site. You will observe together with the article for your complete code, otherwise you would possibly leap to the best and use the event repository correct proper right here. You may also check out the final phrase model of the web site that I’ve deployed for you correct proper right here.

Subsequent.js is a React-based framework that helps you assemble full-stack web websites completely in React. Subsequent.js handles your complete bundling and provides you extraordinarily environment friendly APIs to resolve render every web net web page in order that it may very well be lightning quick. On this textual content, we’ll guarantee that all our pages is probably rendered at assemble time. Resulting from this we’re able to merely expose a sitemap that Google can use to index your web site, which is important for ensuring your site positioning effectivity is sweet.

SurveyJS is an open-source type administration software program program that gives you the flexibleness to create, share and analyze your surveys and sorts. They supply a React API that we’ll use to create a survey administration system with Subsequent.js.

Setting Up Subsequent.js

First, let’s setup our Subsequent.js utility. It’s fast and simple to get began with Subsequent.js, as they supply a CLI software program program which means that you may create a serious app based mostly completely on the preferences you give.

To make the most of the software program program it’s worthwhile to ensure you have npx put in after which run the next command:

npx create-next-app@newest

Whilst you run the create-next-app command it’s going to ask you a set of questions concerning the mission that you need to create. A lot of the questions are completely based mostly completely on private various, so that you would possibly reply them nonetheless you want. For this textual content material, we’ll be utilizing pure JavaScript (pretty than Typescript) and we’ll even be utilizing the mannequin new app router in Subsequent.js pretty than the outdated file router.

Now that you’ve your Subsequent.js app put together, you would possibly run it with:

yarn run dev

This will often depart you with a dev server working that will substitute any time you make modifications to your information. For now, let’s defend this working so we’re ready in order so as to add pages with out having to rebuild each time.

Setting Up SurveyJS

To rearrange SurveyJS, we’re going to should put in your complete completely utterly completely different dependencies. We’re going to make the most of your complete completely utterly completely different elements of SurveyJS together with the shape creator, the shape current and the outcomes bundle, so we have to assure to put in all of them.

To put inside the packages, guarantee that to run the next organize command:

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

Setting Up the Type Creator

First, let’s begin of by along with the shape creator web net web page. I’m going to make mine accessible at /creatorso to try this I create a file at /creator/web net web page.js.

The creator doesn’t want any server-side information to render, so that means that our web net web page ingredient may be quite simple; it merely renders our Creator ingredient, which I’ll define later. It appears to be like like this:

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

export default operate Internet net web page() {
  return Creator />;
}

All through the code above, you would possibly even see that I export each the online net web page and a metadata object. The metadata object will then be used for the site positioning meta tags by Subsequent.js. For this web net web page, we regularly wish to make use of the same string, so we merely export an object.

The Creator ingredient is the place we really use the SurveyJS API. Let’s check out the ingredient:

"use shopper";

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

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

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

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

The very very very first thing you’ll uncover is we use the use shopper directive on this ingredient. It is because of the SurveyJS elements aren’t designed to be run as server elements. To not fear, although; they’ll nonetheless be rendered on the server first ahead of being despatched to the patron.

The following difficulty you’ll see is that we run a useEffect with an empty dependency array. Resulting from this the operate will run as rapidly as and create the SurveyCreator. You will see in the intervening time we’re able to switch in any picks into the creator relying on what decisions we’ve to allow.

All we now should do is render the SurveyCreatorComponent and switch it the creator object. We optionally render it in order that it doesn’t break ahead of the creator is about up.

Your dev server should have been reloading as you go, so inside the event you now go to /creatoryou’ll be succesful to entry the creator and use your complete decisions such as you would possibly even see contained in the screenshot beneath.

Create a Internet net web page to View the Type

Subsequent we’ve to create an web net web page to view the classes that we’ve constructed. Whilst you’ve created the shape contained in the designer, the output is probably a JSON object that will comprise your questions and the preferences you setup as you assemble the survey, together with any logic or varieties.

For our type web net web page, we’ve to make use of a dynamic setup in order that we’re able to render any variety of type pages with out having to create a mannequin new file for each new type. We do this through the use of Subsequent.js dynamic routes. To create a dynamic route, we now should create a mannequin new file at /app/type/[slug]/web net web page.js which may present all our varieties a separate web net web page at /type/form-slug.

In our new file, we now have now to create fairly a couple of capabilities to help Subsequent.js to create our pages. First, let’s begin with generateStaticParamswhich we’re ready to utilize to inform Subsequent.js which pages we’ve to generate. Beneath you would possibly even see the contents of the operate:

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

For this mission, we put together a file that exports an inventory of surveys (which comprise a slug) and a survey (which is the merchandise outfitted by the survey designer). If we’ve so as to add a mannequin new survey, we merely want so as in order so as to add one completely different entry to our surveys array. Our generateStaticParams operate ought to export an inventory of slugswhich Subsequent.js will then use to render our pages at assemble time. For us, which may be quite simple; we merely ought to map our survey array to go effectively with the format:

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

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

The following operate we will strive is generateMetadata. This takes contained in the parameters from the static params operate we merely outlined, after which it returns our title and outline, that are used for the metadata on our web web net web page. As you would possibly even see above, our operate finds the suitable survey object based mostly completely on the slug we’re given. Then we’re ready to utilize the same title and outline that we wrote after we created our survey.

The very closing factor we now should stipulate in our web net web page.js file is the React web net web page itself. The web net web page ingredient for our type web net web page may very well be pretty simple. It finds the survey object as quickly as further, then passes it by means of to the SurveyComponent:

export default operate Internet net web page({ params: { slug } }) {
  const survey = surveys.uncover((x) => x.slug === slug);

  return (
    div>
      SurveyComponent surveyData={survey.survey} />
    /div>
  );
}

The SurveyComponent then should be outlined individually. Strive the ingredient:

"use shopper";

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

export default operate SurveyComponent({ surveyData }) {
  const mannequin = new Mannequin(surveyData);

  const alertResults = useCallback(async (sender) => {
    fetch("/api/submit", {
      methodology: "POST",
      headers: {
        "Content material materials material-Sort": "utility/json;charset=UTF-8",
      },
      physique: JSON.stringify({ end consequence: sender.information }),
    });
  }, []);

  mannequin.onComplete.add(alertResults);

  return Survey mannequin={mannequin} />;
}

As quickly as further, you’ll uncover that we now have now the use shopper directive to verify Subsequent.js is aware of it’s not a server ingredient. We then create a mannequin with SurveyJS and switch it into the SurveyJS Survey ingredient. Ahead of we do that, you’ll uncover that we put together an onComplete operate. In our case, the operate merely sends the uncooked information to /api/submitwhich may then be dealt with there.

You have to use Subsequent.js to create API endpoints. In our case, we’re able to do it by making a file at /api/submit/route.js and placing a POST operate in it, like so:

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

  console.log(res);

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

In our case, the POST operate may be quite simple: it grabs the merchandise that’s despatched after which logs it to the console and responds with a message. That is the place you’ll want to save numerous the highest consequence to your database if in case you can have one. You may also select to validate the highest consequence additional and return a end consequence to level out on the frontend. At this diploma, it’s completely as rather a lot as you what you do with the info.

Making a Internet net web page to View the Outcomes

Now that we now have now put together a solution to create and current varieties, we now should rearrange a solution to strive the outcomes we’ve collected from our varieties. Clearly, a solution to strive the outcomes is simply to look straight on the database, nonetheless that gained’t offer you any insights into traits which may very well be exhibiting in your surveys. If we’ve to arrange traits, we’re ready to utilize the surveyjs-analytics bundle.

For this mission, I’ve created some faux end consequence information so we’re able to create a outcomes dashboard. I’ve added a outcomes array to every survey object that we used earlier. Every end consequence seems one issue like this:

  {
    "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],
  }

As you would possibly even see, every consequence’s merely an object that has the query ID as a key and the reply as a worth. That is precisely what we get from the onComplete operate when the shape is submitted.

First, we’ve to create a mannequin new dynamic web net web page, as we’ll should create a mannequin new web web net web page for every completely utterly completely different type so we’re able to present the outcomes for that kind notably. For this web net web page, we’ve to create a mannequin new file at /outcomes/[slug]/web net web page.js.

As quickly as further, we’ve to outline a generateMetadata and a generateStaticParams like we did to level out the classes. In our generateMetadata operate, we make a slight tweak to the title so it’s clear that we’re wanting on the outcomes pretty than the shape itself. The one distinction this time is that, inside our generateStaticParamswe filter a lot of of the classes that don’t have outcomes so we don’t generate an web net web page for varieties with none outcomes. Our generateStaticParams operate finally ends up wanting like this:

export async operate generateStaticParams() {
  return surveys
    .filter((x) => x.outcomes.dimension > 0)
    .map((x) => ({ slug: x.slug }));
}

As quickly as further, we’ve to furthermore export a Internet net web page ingredient. Our web net web page ingredient is the same as the online net web page ingredient from the earlier half, other than in its place we render the ingredient Outcomes. However we nonetheless do a uncover to seize the precise survey information and switch that by means of to the ingredient.

Our Outcomes ingredient tons of in your full required packages after which renders them to the online net web page. It requires fairly a couple of useEffect hooks to rearrange, and your full ingredient appears to be like like this:

"use shopper";

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

export default operate Outcomes({ surveyData }) {
  useEffect(() => {
    (async () => {
      const survey = new Mannequin(surveyData.survey);

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

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

      currentPanel.render("surveyVizPanel");

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

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

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

As you would possibly even see, we as quickly as further begin with the use shopper directive for all the comparable causes as ahead of. The ingredient begins with a useEffect that’s used to rearrange the panel that reveals your complete charts. It firstly makes use of the surveyData object, which defines the survey itself to create a Mannequin. This lets the outcomes bundle know which graphs to level, because it ought to possibly perceive every query.

The following difficulty the useEffect does is load the survey-analytics bundle. We do this by means of a dynamic import, so it isn’t loaded at assemble time. This method prevents build-time errors attributable to client-side particular code contained in the bundle.

After getting the required bundle, we put together the visualization object along with your full questions after which we’re capable of current it an inventory of your complete submissions for it to endure and create graphs from. At this diploma you would possibly configure your visualizations with the options outfitted. After that, all you need to do is let the panel object know which ID to make the most of to render to contained in the DOM, which in our case is surveyVizPanelwhich we render additional down. Lastly, we now have now to verify to provide a clean-up operate to our hook in order that it clears out the half when it’s accomplished.

You’ll uncover that we solely switch contained in the surveyData to the dependency array in order that we solely re-render your complete graphs if the enter information modifications, which is extra prone to be the case if we ever hyperlink between completely utterly completely different outcomes pages.

Further Work

This textual content material has given you sufficient of an thought to get began integrating SurveyJS into your Subsequent.js utility. To have a really functioning system, you’ll should look into along with some kind of authentication system with the intention to guarantee that solely verified prospects can entry the completely utterly completely different elements of the system.

You’ll furthermore wish to combine with some kind of knowledge present, each for the creator to create new varieties and to gather the outcomes from the best specific individual. All of those additions are made fairly easy in Subsequent.js and SurveyJS.

Conclusion

This information has confirmed you assemble an entire survey administration system in Subsequent.js with SurveyJS. You get so many advantages out of the sphere with Subsequent.js, so though you’ll not have written that masses code, you’ll uncover that what you’ve gotten created will scale to as many kinds as you need with none draw back.

Thanks for taking the time to be taught this information. As I beforehand talked about, you would possibly take a look at the general repo correct proper right here otherwise you would possibly play with the hosted model of the system correct proper right here.