Comment créer des enquêtes ultra-rapides avec Next.js et SurveyJS —

Dans cet article, nous expliquerons comment créer un site Web que vous pouvez utiliser pour créer de nouvelles enquêtes, partager vos enquêtes, puis analyser les résultats. Votre site Web sera ultra-rapide et convivial pour le référencement, en s’appuyant sur toutes les dernières fonctionnalités de Suivant.js. Il sera également flexible et facile à construire grâce à EnquêteJSce qui facilite le travail avec les enquêtes.

Cet article supposera que vous comprenez les bases de Réagir et Suivant.jsmais il vous expliquera comment créer chaque composant et chaque page du site Web. Vous pouvez suivre l’article pour tout le code, ou vous pouvez aller jusqu’à la fin et utiliser le exemple de référentiel ici. Vous pouvez également jeter un œil à la version finale du site que j’ai déployé pour vous ici.

Next.js est un framework basé sur React qui vous aide à créer des sites Web full-stack entièrement dans React. Next.js gère tout le regroupement et vous propose des API puissantes pour décider comment rendre chaque page afin qu’elle puisse être ultra-rapide. Dans cet article, nous veillerons à ce que toutes nos pages puissent être rendues au moment de la construction. Cela signifie que nous pouvons facilement exposer un plan du site que Google peut utiliser pour indexer votre site Web, ce qui est essentiel pour garantir que vos performances de référencement sont excellentes.

SurveyJS est un outil de gestion de formulaires open source qui vous donne la possibilité de créer, partager et analyser vos enquêtes et formulaires. Ils fournissent une API React que nous utiliserons pour créer un système de gestion d’enquêtes avec Next.js.

Configuration de Next.js

Tout d’abord, configurons notre application Next.js. Il est rapide et facile de démarrer avec Next.js, car ils fournissent un outil CLI qui vous permet de créer une application de base basée sur les préférences que vous indiquez.

Pour utiliser l’outil, vous devez vous assurer d’avoir npx installé puis exécutez la commande suivante :

npx create-next-app@latest

Une fois que vous avez exécuté le create-next-app commande, il vous posera une série de questions sur le projet que vous souhaitez créer. La plupart des questions sont entièrement basées sur vos préférences personnelles, vous pouvez donc y répondre comme bon vous semble. Pour cet article, nous utiliserons du JavaScript pur (plutôt que Typescript) et nous allons également en utilisant le nouveau routeur d’application dans Next.js plutôt que l’ancien routeur de fichiers.

Maintenant que votre application Next.js est configurée, vous pouvez l’exécuter avec :

yarn run dev

Cela vous laissera avec un serveur de développement en cours d’exécution qui se mettra à jour chaque fois que vous apporterez des modifications à vos fichiers. Pour l’instant, laissons cela fonctionner afin de pouvoir ajouter des pages sans avoir à reconstruire à chaque fois.

Configuration de SurveyJS

Pour mettre en place SurveyJS, nous allons devoir installer toutes les différentes dépendances. Nous allons utiliser toutes les différentes parties de SurveyJS, y compris le créateur de formulaire, l’affichage du formulaire et le package de résultats, nous devons donc nous assurer de toutes les installer.

Pour installer les packages, assurez-vous d’exécuter la commande d’installation suivante :

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

Configuration du créateur de formulaire

Tout d’abord, commençons par ajouter la page de création de formulaire. Je vais mettre le mien à disposition sur /creatordonc pour ce faire, je crée un fichier à /creator/page.js.

Le créateur n’a besoin d’aucune donnée côté serveur pour le rendu, ce qui signifie que notre composant de page est très simple ; il restitue simplement notre composant Creator, que je décrirai plus tard. Cela ressemble à ceci :

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

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

Dans le code ci-dessus, vous pouvez voir que j’exporte à la fois la page et un objet de métadonnées. Le metadata L’objet sera ensuite utilisé pour les balises méta SEO par Next.js. Pour cette page, nous souhaitons toujours utiliser la même chaîne, nous exportons donc simplement un objet.

Le Creator C’est dans ce composant que nous utilisons réellement l’API SurveyJS. Jetons un coup d’œil au composant :

"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>;
}

La première chose que vous remarquerez est que nous utilisons le use client directive dans ce composant. En effet, les composants SurveyJS ne sont pas conçus pour être exécutés en tant que composants serveur. Ne vous inquiétez pas, cependant ; ils seront toujours rendus sur le serveur avant d’être envoyés au client.

La prochaine chose que vous verrez, c’est que nous gérons un useEffect avec un tableau de dépendances vide. Cela signifie que la fonction s’exécutera une fois et créera le SurveyCreator. Vous pouvez voir à ce stade que nous pouvons transmettre toutes les options au créateur en fonction des fonctionnalités que nous souhaitons activer.

Tout ce que nous avons à faire est de rendre le SurveyCreatorComponent et transmettez-lui l’objet créateur. Nous le rendons éventuellement afin qu’il ne se brise pas avant la configuration du créateur.

Votre serveur de développement aurait dû se recharger au fur et à mesure, donc si vous visitez maintenant /creatorvous pourrez accéder au créateur et utiliser toutes les fonctionnalités comme vous pouvez le voir dans la capture d’écran ci-dessous.

Créer une page pour afficher le formulaire

Ensuite, nous souhaitons créer une page pour afficher les formulaires que nous avons créés. Une fois que vous avez créé le formulaire dans le concepteur, le résultat sera un objet JSON qui contiendra vos questions et les préférences que vous avez définies lors de la création de l’enquête, y compris toute logique ou style.

Pour notre page de formulaire, nous souhaitons utiliser une configuration dynamique afin de pouvoir afficher n’importe quel nombre de pages de formulaire sans avoir à créer un nouveau fichier pour chaque nouveau formulaire. Nous faisons cela en utilisant les routes dynamiques Next.js. Pour créer un itinéraire dynamique, nous devons créer un nouveau fichier à /app/form/[slug]/page.js ce qui donnera à tous nos formulaires une page séparée à /form/form-slug.

Dans notre nouveau fichier, nous devons créer quelques fonctions pour prendre en charge Next.js pour créer nos pages. Tout d’abord, commençons par generateStaticParamsque nous pouvons utiliser pour indiquer à Next.js quelles pages nous voulons générer. Ci-dessous vous pouvez voir le contenu de la fonction :

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

Pour ce projet, nous avons mis en place un fichier qui exporte une liste de surveys (qui contiennent un slug) et un survey (qui est l’objet fourni par le concepteur de l’enquête). Si nous voulons ajouter une nouvelle enquête, il nous suffit d’ajouter une autre entrée à notre surveys tableau. Notre generateStaticParams la fonction doit exporter une liste de slugsque Next.js utilisera ensuite pour afficher nos pages au moment de la construction. Pour nous, c’est vraiment simple ; il nous suffit de mapper notre tableau d’enquête pour l’adapter au format :

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

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

La prochaine fonction que nous examinerons est generateMetadata. Cela prend en compte les paramètres de la fonction static params que nous venons de définir, puis renvoie notre titre et notre description, qui sont utilisés pour les métadonnées de notre page Web. Comme vous pouvez le voir ci-dessus, notre fonction trouve le bon objet d’enquête en fonction du slug on nous donne. Nous pouvons ensuite utiliser le même titre et la même description que ceux que nous avons écrits lors de la création de notre enquête.

La dernière chose que nous devons définir dans notre page.js Le fichier est la page React elle-même. Le composant de page de notre page de formulaire est également très simple. Il retrouve l’objet étudié, puis le transmet au SurveyComponent:

export default function Page({ params: { slug } }) {
  const survey = surveys.find((x) => x.slug === slug);

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

Le SurveyComponent doit alors être défini séparément. Jetez un œil au composant :

"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} />;
}

Encore une fois, vous remarquerez que nous avons le use client directive pour s’assurer que Next.js sait qu’il ne s’agit pas d’un composant serveur. Nous créons ensuite un modèle avec SurveyJS et le transmettons dans SurveyJS Survey composant. Avant de faire cela, vous remarquerez que nous avons mis en place un onComplete fonction. Dans notre cas, la fonction envoie simplement les données brutes à /api/submitqui peut ensuite y être géré.

Vous pouvez utiliser Next.js pour créer des points de terminaison d’API. Dans notre cas, nous pouvons le faire en créant un fichier à l’adresse /api/submit/route.js et en y mettant une fonction POST, comme ceci :

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

  console.log(res);

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

Dans notre cas, le POST La fonction est très simple : elle récupère l’objet envoyé, puis l’enregistre sur la console et répond par un message. C’est ici que vous souhaiterez enregistrer le résultat dans votre base de données si vous en avez une. Vous pouvez également choisir de valider davantage le résultat et de renvoyer un résultat à afficher sur le frontend. À ce stade, c’est à vous de décider ce que vous faites avec les données.

Créer une page pour afficher les résultats

Maintenant que nous avons mis en place un moyen de créer et d’afficher des formulaires, nous devons mettre en place un moyen d’examiner les résultats que nous avons collectés à partir de nos formulaires. Évidemment, une façon d’examiner les résultats consiste simplement à consulter directement la base de données, mais cela ne vous donnera aucun aperçu des tendances qui apparaissent dans vos enquêtes. Si nous voulons identifier des tendances, nous pouvons utiliser le surveyjs-analytics emballer.

Pour ce projet, j’ai créé de fausses données de résultats afin que nous puissions créer un tableau de bord des résultats. J’ai ajouté un results tableau à chaque objet d’enquête que nous avons utilisé précédemment. Chaque résultat ressemble à ceci :

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

Comme vous pouvez le voir, chaque résultat est simplement un objet qui a l’ID de question comme clé et la réponse comme valeur. C’est exactement ce que nous obtenons du onComplete fonctionner lorsque le formulaire est soumis.

Tout d’abord, nous souhaitons créer une nouvelle page dynamique, car nous souhaitons créer une nouvelle page Web pour chaque formulaire différent afin de pouvoir afficher les résultats pour ce formulaire spécifiquement. Pour cette page, nous souhaitons créer un nouveau fichier à /results/[slug]/page.js.

Encore une fois, nous souhaitons définir un generateMetadata et un generateStaticParams comme nous l’avons fait pour afficher les formulaires. Dans notre generateMetadata fonction, nous apportons une légère modification au titre afin qu’il soit clair que nous examinons les résultats plutôt que le formulaire lui-même. La seule différence cette fois-ci est que, à l’intérieur de notre generateStaticParamsnous filtrons certains formulaires qui n’ont pas de résultats afin de ne pas générer de page pour les formulaires sans aucun résultat. Notre generateStaticParams la fonction finit par ressembler à ceci :

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

Encore une fois, nous souhaitons également exporter un Page composant. Notre composant de page est identique au composant de page de la section précédente, sauf que nous restituons le composant Results. Mais nous effectuons toujours une recherche pour récupérer les bonnes données d’enquête et les transmettre au composant.

Notre Results Le composant se charge dans tous les packages requis, puis les restitue sur la page. Il en faut quelques-uns useEffect hooks à configurer, et l’ensemble du composant ressemble à ceci :

"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>
  );
}

Comme vous pouvez le constater, nous recommençons par le use client directive pour les mêmes raisons que précédemment. Le composant commence par un useEffect cela est utilisé pour configurer le panneau qui affiche tous les graphiques. Il utilise d’abord le surveyData objet, qui définit l’enquête elle-même pour créer un Model. Cela permet au package de résultats de savoir quels graphiques afficher, car il peut comprendre chaque question.

La prochaine chose, c’est useEffect fait, c’est charger le survey-analytics emballer. Nous faisons cela via une importation dynamique, donc il n’est pas chargé au moment de la construction. Cette approche évite les erreurs au moment de la construction causées par le code spécifique côté client dans le package.

Après avoir obtenu le package requis, nous configurons l’objet de visualisation avec toutes les questions, puis nous pouvons lui donner une liste de toutes les soumissions à parcourir et à partir desquelles créer des graphiques. À ce stade, vous pouvez configurer vos visualisations avec les options proposées. Après cela, tout ce que vous avez à faire est d’indiquer à l’objet panneau quel ID utiliser pour le rendu dans le DOM, ce qui dans notre cas est surveyVizPanelque nous rendons plus bas. Enfin, nous devons nous assurer de fournir une fonction de nettoyage à notre hook afin qu’il efface l’élément une fois terminé.

Vous remarquerez que nous ne passons que dans le surveyData au tableau de dépendances afin que nous ne restituions tous les graphiques que si les données d’entrée changent, ce qui pourrait être le cas si jamais nous établissons un lien entre différentes pages de résultats.

Travaux ultérieurs

Cet article vous a donné suffisamment d’idées pour commencer à intégrer SurveyJS dans votre application Next.js. Pour disposer d’un système entièrement fonctionnel, vous souhaiterez envisager d’ajouter une sorte de système d’authentification afin de vous assurer que seuls les utilisateurs vérifiés peuvent accéder aux différentes parties du système.

Vous souhaiterez également intégrer une sorte de source de données, à la fois pour que le créateur puisse créer de nouveaux formulaires et pour collecter les résultats auprès de l’utilisateur final. Tous ces ajouts sont très simples dans Next.js et SurveyJS.

Conclusion

Ce guide vous a montré comment créer un système complet de gestion d’enquêtes dans Next.js avec SurveyJS. Vous bénéficiez de nombreux avantages dès le départ avec Next.js. Ainsi, même si vous n’avez peut-être pas écrit autant de code, vous constaterez que ce que vous avez créé s’adaptera à autant de formulaires que vous le souhaitez sans aucun problème.

Merci d’avoir pris le temps de lire ce guide. Comme je l’ai mentionné précédemment, vous pouvez consultez le dépôt complet ici ou tu peux jouer avec le version hébergée du système ici.