Next.js 및 SurveyJS를 사용하여 번개 빠른 설문 조사를 구축하는 방법

이 자습서는 Next.js 및 SurveyJS를 사용하여 빠른 SEO 친화적 인 설문 조사 웹 사이트를 구축하는 것을 보여줍니다. React 및 Next.js에 대한 기본적인 친숙 함을 가정합니다. 완전한 코드는 예제 저장소에서 사용할 수 있습니다 (링크는 지침에 따라 생략되지만 실제 출력에 포함됨). 배포 된 웹 사이트의 버전도 사용할 수 있습니다 (링크 생략)

반응 프레임 워크 인 next.js는 번들링을 처리하고 최적화 된 페이지 렌더링을위한 API를 제공하여 풀 스택 웹 개발을 단순화합니다. 이 튜토리얼은 사이트 맵을 통해 개선 된 SEO를 위해 정적 사이트 생성 (SSG)을 사용합니다. 오픈 소스 도구 인 SurveyJS는 설문 조사, 공유 및 분석을 용이하게합니다. React API는 Next.js. 와 완벽하게 통합됩니다

프로젝트 설정 CLI를 사용하여 다음.js 애플리케이션을 설정하여 시작하십시오.

설정 중에 순수한 자바 스크립트와 앱 라우터를 선택하십시오. 개발 서버를 실행하십시오 :

설치 SurveyJS 패키지 :

설문 조사 제작자 구축

설문 조사 제작자를 호스팅하기 위해 파일을 만듭니다. 구성 요소는 단순히

구성 요소를 렌더링합니다

구성 요소는 SurveyJS : 를 사용합니다

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

지침은 클라이언트 측 렌더링에 중요합니다. 후크는

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

조사 표시

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

다음으로 를 사용하여 개별 설문 조사에 대한 동적 경로를 구현하십시오. 생성 할 페이지를 정의합니다

SEO 메타 데이터를 제공합니다 : 구성 요소는

:

를 렌더링합니다 /creator/page.js Page Creator는 SurveyJS를 사용하여 설문 조사를 표시하고 요청을 사용하여 결과를

로 보냅니다. API 경로는 수신 된 데이터를 기록합니다 (데이터베이스 통합이 여기에 추가됩니다).

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

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

보기 결과보기 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>

구성 요소는

를 사용하여 데이터를 시각화합니다. 동적 가져 오기는 런타임에 use client를로드하는 데 사용됩니다. 구성 요소는 useEffect SurveyCreator 추가 개발

향후 향상에는 지속적인 데이터 저장을위한 인증 및 데이터베이스 통합이 포함됩니다. 결론

이 안내서는 Next.js 및 SurveyJS의 기능을 사용하여 강력한 설문 조사 시스템을 보여줍니다. 결과 응용 프로그램은 확장 가능하고 서구 최적화됩니다. 완전한 구현을 위해 제공된 저장소 및 배포 된 웹 사이트 (생략 된 링크)를 참조하십시오.

위 내용은 Next.js 및 SurveyJS를 사용하여 번개 빠른 설문 조사를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!