next.jsとsurveyjsで雷の高速調査を構築する方法

このチュートリアルでは、next.jsとsurveyjsを使用して、高速でSEOに優しい調査Webサイトを構築することを示しています。 Reactおよびnext.jsに基本的な精通を想定しています。 完全なコードは、サンプルリポジトリで使用できます（手順に従ってリンク省略されていますが、実際の出力に含まれます）。ウェブサイトの展開バージョンも利用可能です（リンク省略）。

React FrameworkであるNext.jsは、バンドリングを処理し、最適化されたページレンダリング用のAPIを提供することにより、フルスタックWeb開発を簡素化します。 このチュートリアルでは、サイトマップを介して改善されたSEOに静的サイト生成（SSG）を利用しています。 オープンソースツールであるSurveyJSは、調査の作成、共有、分析を促進します。そのReact APIは、next.js. とシームレスに統合されます

プロジェクトのセットアップ

CLIを使用してnext.jsアプリケーションをセットアップすることから始めます：

セットアップ中に純粋なJavaScriptとアプリルーターを選択します。 開発サーバーを実行します：

SurveyJSパッケージをインストール：

npx create-next-app@latest

調査作成者の構築

yarn run dev

調査作成者をホストするための

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

ファイルを作成します。

コンポーネントは、単にコンポーネントをレンダリングするだけです

コンポーネントはsurveyjs：/creator/page.jsを使用します Page Creator

指令は、クライアント側のレンダリングに不可欠です。

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

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

フックは

。Creatorを初期化します

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

use clientuseEffect調査の表示SurveyCreator

次に、を使用して個々の調査に動的ルートを実装します。

生成するページを定義します：

SEOメタデータを提供します：

/app/form/[slug]/page.js generateStaticParams

コンポーネントは

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

：

をレンダリングします generateMetadata リクエストを使用して結果を

に送信します。 APIルートは受信したデータを記録します（データベース統合はここに追加されます）。

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

結果の表示PageSurveyComponent

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

で結果ページを作成します。

は、結果とともに調査をフィルタリングします。 SurveyComponentコンポーネントは/api/submit/route.jsを使用してデータを視覚化します。 動的なインポートは、ビルドエラーを回避するために、実行時にfetch> loadに使用されます。 このコンポーネントは、

。

を使用して視覚化をレンダリングします さらなる開発

将来の拡張機能には、永続的なデータストレージのための認証とデータベース統合が含まれます。

結論

このガイドは、next.jsとsurveyjsの機能を使用した堅牢な調査システムを示しています。 結果のアプリケーションはスケーラブルでSEO最適化されています。 完全な実装のために、提供されたリポジトリと展開されたWebサイト（リンク省略）を参照してください。

以上がnext.jsとsurveyjsで雷の高速調査を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。