So bauen Sie blitzschnelle Umfragen mit Next.js und SurveyJs

Dieses Tutorial zeigt, dass das Erstellen einer schnellen, seo-freundlichen Umfrage-Website mit Next.js und SurveyJs erstellt wird. Es setzt eine grundlegende Vertrautheit mit React und Next.js. Der vollständige Code ist im Beispiel-Repository verfügbar (Link wird gemäß den Anweisungen weggelassen, würde jedoch in einer realen Ausgabe enthalten). Eine bereitgestellte Version der Website ist ebenfalls verfügbar (Link weggelassen).

Next.js, ein React-Framework, vereinfacht die Webentwicklung mit Full-Stack, indem sie Bündelung bearbeiten und APIs für eine optimierte Seitenwiedergabe anbieten. In diesem Tutorial wird die statische Site Generation (SSG) für eine verbesserte SEO über Sitemaps verwendet.

SurveyJs, ein Open-Source-Tool, erleichtert die Erstellung, das Teilen und die Analyse von Umfragen. Die React -API integriert sich nahtlos in Next.js.

Einrichten des Projekts

Beginnen Sie mit der Einrichtung einer nächsten.js -Anwendung mit der CLI:

npx create-next-app@latest

Wählen Sie während des Setups Pure JavaScript und den App -Router. Führen Sie den Entwicklungsserver aus:

yarn run dev

SurveyJS -Pakete installieren:

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

Erstellen des Umfrageerschöpfers

Erstellen Sie eine /creator/page.js Datei, um den Umfrageersteller zu hosten. Die Page -Komponente rendert einfach die Creator -Komponente:

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

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

Die Creator -Komponente verwendet SurveyJs:

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

Die Richtlinie use client ist für die Kunden-Seite von entscheidender Bedeutung. Der useEffect -Haken initialisiert die SurveyCreator.

Anzeige der Umfrage

Implementieren Sie als nächstes dynamische Routen für einzelne Umfragen mit /app/form/[slug]/page.js. generateStaticParams definiert die zu generierenden Seiten:

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

generateMetadata bietet SEO -Metadaten:

export async function generateMetadata({ params }) {
  const survey = surveys.find((x) => x.slug === params.slug);
  return { title: survey.survey.title, description: survey.survey.description };
}

Die Page -Komponente rendert die SurveyComponent:

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

Die SurveyComponent verwendet SurveyJs, um die Umfrage anzuzeigen, und sendet Ergebnisse an /api/submit/route.js mit einer fetch -Anforderung an

. Die API -Route protokolliert die empfangenen Daten (Datenbankintegration wird hier hinzugefügt).

Anzeigenergebnisse

/results/[slug]/page.js Erstellen Sie eine Ergebnisseite bei generateStaticParams. Results filtert Umfragen mit Ergebnissen. Die survey-analytics -Komponente verwendet survey-analytics, um die Daten zu visualisieren. Dynamische Importe werden verwendet, um VisualizationPanel zur Laufzeit zu laden, um Erstellungsfehler zu vermeiden. Die Komponente macht Visualisierungen mit

.

Weitere Entwicklung

Zukünftige Verbesserungen umfassen Authentifizierung und Datenbankintegration für die persistente Datenspeicherung.

Schlussfolgerung

Dieser Leitfaden zeigt ein robustes Umfragesystem unter Verwendung von Next.js und SurveyJS -Funktionen. Die resultierende Anwendung ist skalierbar und SEO-optimiert. Denken Sie daran, das bereitgestellte Repository- und Bereitstellungswebsite (Links weggelassen) für die vollständige Implementierung zu konsultieren.

Das obige ist der detaillierte Inhalt vonSo bauen Sie blitzschnelle Umfragen mit Next.js und SurveyJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!