使用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中文网其他相关文章！