Cara Membina Kajian Cepat Kilat Dengan Next.js dan SurveyJS

Tutorial ini menunjukkan membina laman web tinjauan yang cepat dan mesra dengan menggunakan Next.js dan SurveyJS. Ia menganggap kebiasaan asas dengan React dan Next.Js. Kod lengkap boleh didapati dalam repositori contoh (pautan yang ditinggalkan mengikut arahan, tetapi akan dimasukkan ke dalam output dunia sebenar). Versi laman web yang digunakan juga tersedia (pautan ditinggalkan).

next.js, rangka kerja React, memudahkan pembangunan web penuh dengan mengendalikan bundling dan menawarkan API untuk rendering halaman yang dioptimumkan. Tutorial ini menggunakan Generasi Laman Statik (SSG) untuk SEO yang lebih baik melalui sitemaps.

SurveyJs, alat sumber terbuka, memudahkan penciptaan tinjauan, perkongsian, dan analisis. API Reactnya diintegrasikan dengan lancar dengan Next.Js.

Menyediakan projek

Mulailah dengan menyediakan aplikasi Next.js menggunakan CLI:

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

Pilih JavaScript Pure dan penghala aplikasi semasa persediaan. Jalankan Pelayan Pembangunan:

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

Pasang pakej SurveyJS:

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

Membina pencipta tinjauan

Buat fail

untuk menjadi tuan rumah pencipta tinjauan. Komponen /creator/page.js hanya membuat komponen Page: Creator

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

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

komponen

menggunakan tinjauan: Creator

<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>

Arahan

adalah penting untuk rendering sisi klien. Hook use client memulakan useEffect. SurveyCreator

Memaparkan kaji selidik

Seterusnya, laksanakan laluan dinamik untuk tinjauan individu menggunakan

.

mentakrifkan halaman untuk menjana: /app/form/[slug]/page.js generateStaticParams

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

Menyediakan Metadata SEO:

generateMetadata

komponen

<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>

menjadikan

: Page 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>

menggunakan kaji selidik untuk memaparkan kaji selidik dan menghantar hasil kepada

menggunakan permintaan SurveyComponent. Laluan API log data yang diterima (integrasi pangkalan data akan ditambah di sini). /api/submit/route.js fetch

Hasil tontonan

Buat halaman hasil di

.

Penapis tinjauan dengan hasil. Komponen /results/[slug]/page.js menggunakan generateStaticParams untuk memvisualisasikan data. Import dinamik digunakan untuk memuatkan Results semasa runtime untuk mengelakkan kesilapan membina. Komponen membuat visualisasi menggunakan survey-analytics. survey-analytics VisualizationPanel

Pembangunan selanjutnya

Penambahbaikan masa depan termasuk penguatkuasaan dan integrasi pangkalan data untuk penyimpanan data yang berterusan.

Kesimpulan

Panduan ini menunjukkan sistem tinjauan yang mantap menggunakan keupayaan Next.js dan SurveyJS. Permohonan yang dihasilkan adalah berskala dan dioptimumkan SEO. Ingatlah untuk berunding dengan laman web repositori yang disediakan dan digunakan (pautan yang ditinggalkan) untuk pelaksanaan yang lengkap.

Atas ialah kandungan terperinci Cara Membina Kajian Cepat Kilat Dengan Next.js dan SurveyJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!