使用Next.js構建網球瑣事應用程序和Netlify

該教程展示了使用Next.js和Netlify構建有趣的網球瑣事應用程序，這是一種強大的快速開發和無縫部署的組合。讓我們潛入！

技術堆棧

我們將利用：

• next.js：用於構建Web應用程序的React框架。它的功能如服務器端渲染和內置路由流線路開發。
• NetLify：一個輕鬆部署Web應用程序的平台。它的無服務器功能和簡單的部署過程是關鍵優勢。
• 打字稿：將靜態輸入添加到JavaScript，改善代碼可維護性並減少錯誤。
• Tailwind CSS：快速UI開發的公用事業第一CSS框架。

為什麼Next.js和Netlify？

儘管一個簡單的瑣事應用似乎不需要React框架，但Next.js提供了重大的好處：預配置的WebPack，用於服務器端數據獲取的getServerSideProps以及與Netlify的無服務器功能無縫集成。 Netlify簡化了部署過程，從而使從GIT存儲庫中部署下一個應用程序非常容易。

應用概述

Trivia Game提出了網球運動員的名字，您猜想他們的原籍國。該遊戲由五輪比賽組成，跟踪您的分數。代替實時API，我們將使用包含來自RapidApi的播放器數據的本地JSON文件（包含在啟動回購中）。

可以在NetLify上使用部署版本（鏈接要在此處添加）。

入門倉庫

要跟隨，請克隆存儲庫，然後切換到start分支：

 git克隆[電子郵件保護]：brenelz/tennis-trivia.git
CD網球洞穴
GIT結帳開始

入門存儲庫包括一個基本的Next.js應用程序，該應用程序配備了打字稿和尾風CSS。

入門

1. 環境變量：將.env.sample文件複製到.env.local ，將API_URL與NEXT_PUBLIC_前綴為前端訪問：

    cp .env.sample .env.local

   登入後複製

2. 安裝依賴項並開始開發服務器：

    NPM安裝
   NPM運行開發

   登入後複製

   通過http://localhost:3000 。

UI開發

在pages/index.tsx中，通過以下標記增強Home()函數（使用尾風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> {分數}
        </p>
      </div>
    </div>
  ）；
}

這提供了基本結構。完整的代碼，包括互動性和國家管理，將在後續部分中詳細闡述。

數據管理

data/tennisPlayers.json文件保存我們的播放器數據。創建一個lib/players.ts文件，以定義播放器的打字稿類型和函數以訪問和處理數據：

 // ...（玩家類型定義）...

導出const playerData：player [] = require（“ ../ data/data/tennisplayers.json”）;
導出const top100players = playerData.slice（0，100）;
導出const uniquecountries = [... new Set（playerData.map（（p）=> p.country））]。sort（）;

這設置了類型的安全性，並為檢索玩家和獨特國家 /地區提供了功能。

（其餘部分詳細詳細介紹了動態UI更新，交互性，部署進行淨化以及結論將遵循類似的簡潔解釋和代碼段的模式，從而維護原始文章的整體流量和結構。

以上是使用Next.js構建網球瑣事應用程序和Netlify的詳細內容。更多資訊請關注PHP中文網其他相關文章！