Comment construire des parts rapides avec des éclairs avec Next.js et Surveyjs

Ce didacticiel montre la création d'un site Web rapide et adapté à un référencement en utilisant Next.js et SurveyJS. Il assume la familiarité de base avec React et Next.js. Le code complet est disponible dans l'exemple de référentiel (lien omis selon les instructions, mais serait inclus dans une sortie réelle). Une version déployée du site Web est également disponible (lien omis).

Next.js, un cadre React, simplifie le développement Web complet de la file d'attente en manipulant le regroupement et en offrant des API pour le rendu de page optimisé. Ce tutoriel utilise la génération de sites statiques (SSG) pour améliorer le référencement via des sitemaps.

SurveyJS, un outil open source, facilite la création, le partage et l'analyse de l'enquête. Son API React s'intègre de manière transparente avec Next.js.

Configuration du projet

Commencez par configurer une application Next.js à l'aide du CLI:

<code class="language-bash">npx create-next-app@latest</code>

Choisissez Pure JavaScript et le routeur de l'application pendant la configuration. Exécutez le serveur de développement:

<code class="language-bash">yarn run dev</code>

Installez les packages d'enquête:

<code class="language-bash">yarn add survey-analytics survey-core survey-creator-core survey-creator-react survey-react-ui</code>

Construire le créateur d'enquête

Créez un fichier /creator/page.js pour héberger le créateur d'enquête. Le composant Page rend simplement le composant Creator:

<code class="language-javascript">export const metadata = { title: "Survey Creator" };

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

Le composant Creator utilise des enquêteurs:

<code class="language-javascript">"use client";

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

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

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

  return <div>{creator && <surveycreatorcomponent creator="{creator}"></surveycreatorcomponent>}</div>;
}</code>

La directive use client est cruciale pour le rendu côté client. Le useEffect Hook initialise le SurveyCreator.

Affichage de l'enquête

Ensuite, implémentez les routes dynamiques pour les enquêtes individuelles à l'aide de /app/form/[slug]/page.js. generateStaticParams définit les pages à générer:

<code class="language-javascript">export async function generateStaticParams() {
  return surveys.map((x) => ({ slug: x.slug }));
}</code>

generateMetadata fournit des métadonnées SEO:

<code class="language-javascript">export async function generateMetadata({ params }) {
  const survey = surveys.find((x) => x.slug === params.slug);
  return { title: survey.survey.title, description: survey.survey.description };
}</code>

Le composant Page rend le SurveyComponent:

<code class="language-javascript">export default function Page({ params: { slug } }) {
  const survey = surveys.find((x) => x.slug === slug);
  return <surveycomponent surveydata="{survey.survey}"></surveycomponent>;
}</code>

Le SurveyComponent utilise des enquêteurs pour afficher l'enquête et envoie des résultats à /api/submit/route.js en utilisant une demande fetch. L'itinéraire API enregistre les données reçues (l'intégration de la base de données serait ajoutée ici).

Affichage des résultats

Créez une page de résultats à /results/[slug]/page.js. generateStaticParams filtre les enquêtes avec les résultats. Le composant Results utilise survey-analytics pour visualiser les données. Les importations dynamiques sont utilisées pour charger survey-analytics au moment de l'exécution pour éviter les erreurs de construction. Le composant rend les visualisations en utilisant VisualizationPanel.

développement ultérieur

Les améliorations futures incluent l'authentification et l'intégration de la base de données pour le stockage de données persistantes.

Conclusion

Ce guide démontre un système d'enquête robuste utilisant les capacités de Next.js et SurveyJS. L'application résultante est évolutive et optimisée en SEO. N'oubliez pas de consulter le site Web fourni et le site Web déployé (liens omis) pour l'implémentation complète.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!