Membina aplikasi Trivia Tenis dengan Next.js dan Netlify

Tutorial ini menunjukkan membina aplikasi trivia tenis yang menyeronokkan menggunakan Next.js dan Netlify, gabungan yang kuat untuk pembangunan pesat dan penggunaan lancar. Mari menyelam!

Stack Tech

Kami akan memanfaatkan:

• Next.js: Rangka Kerja React untuk Membangun Aplikasi Web. Ciri-cirinya seperti penyampaian pelayan dan pembangunan routing terbina dalam.
• Netlify: Platform untuk menggunakan aplikasi web dengan mudah. Fungsi tanpa pelayan dan proses penempatan mudah adalah kelebihan utama.
• TypeScript: Menambah menaip statik ke JavaScript, meningkatkan pengekalan kod dan mengurangkan kesilapan.
• Tailwind CSS: Rangka kerja CSS yang pertama untuk pembangunan UI yang pesat.

Kenapa Seterusnya.js dan Netlify?

Walaupun aplikasi trivia mudah mungkin tidak memerlukan rangka kerja React, Next.js memberikan manfaat yang ketara: webpack pra-konfigurasi, getServerSideProps untuk pengambilan data pelayan, dan integrasi lancar dengan fungsi tanpa pelayan Netlify. Netlify memudahkan proses penempatan, menjadikannya sangat mudah untuk menggunakan aplikasi Next.js dari repositori Git.

Gambaran keseluruhan aplikasi

Permainan Trivia membentangkan nama pemain tenis, dan anda rasa negara asalnya. Permainan ini terdiri daripada lima pusingan, menjejaki skor anda. Daripada API live, kami akan menggunakan fail JSON tempatan (termasuk dalam repo starter) yang mengandungi data pemain yang diperoleh dari Rapidapi.

Versi yang digunakan boleh didapati di Netlify (pautan yang akan ditambah di sini).

Repo starter

Untuk mengikuti, klon repositori dan beralih ke cawangan start :

 Git Clone [dilindungi e-mel]: Brenelz/Tennis-Rivia.git
CD Tenis-Trivia
Git checkout bermula

Repo starter termasuk aplikasi Next.js asas, dikonfigurasi dengan TypeScript dan tailwind CSS.

Bermula

1. Pembolehubah Alam Sekitar: Salin fail .env.sample ke .env.local , awalan API_URL dengan NEXT_PUBLIC_ untuk akses frontend:

    cp .env.sample .env.local

2. Pasang Dependencies & Start Dev Server:

    Pemasangan NPM
   NPM Run Dev

   Akses aplikasi di http://localhost:3000 .

Pembangunan UI

Di pages/index.tsx , tingkatkan fungsi Home() dengan markup berikut (menggunakan kelas CSS Tailwind):

 // ... (penyataan import) ...

Eksport fungsi lalai rumah () {
  // ... (pembolehubah dan fungsi negeri) ...

  kembali (
    <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">
        {/ * ... (tajuk dan arahan) ... */}
        <h2 classname="text-lg font-extrabold text-white my-5">
          {player.full_name}
        </h2>
        {/ * ... (medan input dan butang hantar) ... */}
        <p classname="mt-4 text-lg leading-6 text-white">
          <strong>Skor Semasa:</strong> {SCORE}
        </p>
      </div>
    </div>
  );
}

Ini menyediakan struktur asas. Kod lengkap, termasuk interaktiviti dan pengurusan negeri, akan dijelaskan dalam bahagian berikutnya.

Pengurusan Data

Fail data/tennisPlayers.json memegang data pemain kami. Buat fail lib/players.ts untuk menentukan jenis jenis untuk pemain dan fungsi untuk mengakses dan memproses data:

 // ... (definisi jenis pemain) ...

eksport const playerData: pemain [] = memerlukan ("../ data/tennisplayers.json");
eksport const top100players = playerData.slice (0, 100);
eksport const uniquecountries = [... set baru (playerData.map ((p) => p.country))]. sort ();

Ini menetapkan keselamatan jenis dan menyediakan fungsi untuk mendapatkan pemain dan negara yang unik.

(Bahagian yang selebihnya yang memperincikan kemas kini UI dinamik, interaktiviti, penempatan untuk Netlify, dan kesimpulan akan mengikuti corak penjelasan ringkas dan coretan kod, mengekalkan aliran dan struktur keseluruhan artikel asal.)

Atas ialah kandungan terperinci Membina aplikasi Trivia Tenis dengan Next.js dan Netlify. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!