Next.js 및 NetLify와 함께 테니스 퀴즈 앱 구축-CSS 튜토리얼-php.cn

Next.js 및 NetLify와 함께 테니스 퀴즈 앱 구축

Joseph Gordon-Levitt

풀어 주다： 2025-03-19 09:14:14

원래의

982명이 탐색했습니다.

Next.js 및 NetLify와 함께 테니스 퀴즈 앱 구축

이 튜토리얼은 빠른 개발 및 원활한 배치를위한 강력한 조합 인 Next.js 및 NetLify를 사용하여 재미있는 테니스 트리비아 앱을 구축하는 것을 보여줍니다. 다이빙하자!

기술 스택

우리는 활용할 것입니다 :

Next.js : 웹 응용 프로그램 구축을위한 React 프레임 워크. 서버 측 렌더링 및 내장 라우팅 간소화 개발과 같은 기능.
NETLIFY : 웹 애플리케이션을 쉽게 배포하기위한 플랫폼. 서버리스 기능과 간단한 배포 프로세스가 핵심 장점입니다.
TypeScript : JavaScript에 정적 타이핑을 추가하고 코드 유지 관리 가능성을 향상시키고 오류를 줄입니다.
Tailwind CSS : 빠른 UI 개발을위한 유틸리티 우선 CSS 프레임 워크.

왜 다음 .js와 netlify?

간단한 Trivia 앱은 React 프레임 워크가 필요하지 않은 것처럼 보이지만 Next.js는 상당한 이점을 제공합니다. 사전 구성된 웹 팩, 서버 측 데이터 가져 오기를위한 getServerSideProps 및 NetLify의 서버리스 기능과의 원활한 통합. NetLify는 배포 프로세스를 단순화하여 GIT 저장소에서 다음.js 응용 프로그램을 쉽게 배포 할 수 있습니다.

앱 개요

퀴즈 게임은 테니스 선수의 이름을 제시하며, 당신은 그들의 출신 국가를 추측합니다. 게임은 5 라운드로 구성되어 점수를 추적합니다. Live API 대신 RapidAPI에서 공급 된 플레이어 데이터를 포함하는 로컬 JSON 파일 (스타터 리포에 포함)을 사용합니다.

배포 된 버전은 NetLify에서 사용할 수 있습니다 (여기에서 추가 할 링크).

스타터 리포

따라 가려면 저장소를 복제하고 start 분기로 전환하십시오.

 git 클론 [이메일 보호] : Brenelz/Tennis-trivia.git
CD 테니스 트리비아
git 체크 아웃 시작

로그인 후 복사

스타터 리포에는 TypeScript 및 Tailwind CSS로 구성된 기본 Next.js 앱이 포함되어 있습니다.

시작하기

환경 변수 : .env.sample 파일을 .env.local 에 복사하고, Frontend Access를 위해 API_URL NEXT_PUBLIC_ 로 접두사합니다.
```
 cp .env.sample .env.local
```
로그인 후 복사
종속성 설치 및 시작 Dev 서버 :
```
 NPM 설치
NPM Run Dev
```
로그인 후 복사
http://localhost:3000 에서 앱에 액세스하십시오.

UI 개발

pages/index.tsx 에서 다음 마크 업으로 Home() 함수를 향상시킵니다 (Tailwind CSS 클래스 사용) :

 // ... (가져 오기 명세서) ...

내보내기 기본 기능 home () {
  // ... (상태 변수 및 기능) ...

  반품 (
    <div classname="bg-blue-500">
      <div classname="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
        {/ * ... (제목 및 지시) ... */}
        <h2 classname="text-lg font-extrabold text-white my-5">
          {player.full_name}
        </h2>
        {/ * ... (입력 필드 및 제출 버튼) ... */}
        <p classname="mt-4 text-lg leading-6 text-white">
          <strong>현재 점수 :</strong> {score}
        </p>
      </div>
    </div>
  );
}

로그인 후 복사

이것은 기본 구조를 제공합니다. 상호 작용 및 상태 관리를 포함한 전체 코드는 후속 섹션에서 자세히 설명됩니다.

데이터 관리

data/tennisPlayers.json 파일은 플레이어 데이터를 보유합니다. lib/players.ts 파일을 만들려면 플레이어와 기능을 수행하고 기능을 수행 할 수있는 기능을 정의하고 데이터에 액세스하고 처리합니다.

 // ... (플레이어 유형 정의) ...

const playerData 내보내기 : player [] = require ( "../ data/tennisplayers.json");
Const Top100players = PlayerData.Slice (0, 100)를 내보내십시오.
내보내기 const iriquecountries = [... new set (playerData.map ((p) => p.country))]. Sort ();

로그인 후 복사

이것은 유형 안전을 설정하고 플레이어와 고유 국가를 검색하는 기능을 제공합니다.

(나머지 섹션은 동적 UI 업데이트, 상호 작용, NetLify 배포 및 결론을 자세히 설명하는 나머지 섹션은 원래 기사의 전반적인 흐름과 구조를 유지하는 유사한 간결한 설명 및 코드 스 니펫 패턴을 따릅니다.)

위 내용은 Next.js 및 NetLify와 함께 테니스 퀴즈 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!