Aufbau einer Tennis -Trivia -App mit Next.js und Netlify

Dieses Tutorial zeigt, dass ein lustiges Tennis -Trivia -App mit Next.js und Netlify errichtet wird, eine leistungsstarke Kombination für die schnelle Entwicklung und die nahtlose Bereitstellung. Lass uns eintauchen!

Tech Stack

Wir werden nutzen:

• Weiter.js: Ein React -Framework zum Erstellen von Webanwendungen. Die Funktionen wie das Server-Seiten-Rendering und die integrierte Routing-Stromlinienentwicklung.
• Netlify: Eine Plattform für die mühelose Bereitstellung von Webanwendungen. Die serverlosen Funktionen und der einfache Bereitstellungsprozess sind wichtige Vorteile.
• TypeScript: Fügt JavaScript eine statische Typisierung hinzu, verbessert die Wartbarkeit der Code und die Reduzierung von Fehlern.
• Tailwind CSS: Ein Utility-First CSS-Framework für die schnelle UI-Entwicklung.

Warum Next.js und Netlify?

Während eine einfache Trivia-App anscheinend kein React-Framework erfordern scheint, bietet Next.js erhebliche Vorteile: vorkonfiguriertes Webpack, getServerSideProps für serverseitige Datenabrufen und nahtlose Integration in die serverlosen Funktionen von Netlify. Netlify vereinfacht den Bereitstellungsprozess und macht es unglaublich einfach, eine Next.js -Anwendung aus einem Git -Repository bereitzustellen.

App -Übersicht

Das Trivia -Spiel zeigt den Namen eines Tennisspieler, und Sie erraten ihr Herkunftsland. Das Spiel besteht aus fünf Runden, die Ihre Punktzahl verfolgen. Anstelle einer Live -API verwenden wir eine lokale JSON -Datei (im Starter -Repo enthalten), die Player -Daten enthält, die von Rapidapi bezogen wurden.

Eine bereitgestellte Version ist auf NetLify verfügbar (Link soll hier hinzugefügt werden).

Starter Repo

Klonen Sie das Repository und wechseln Sie zum start :

 Git-Klon [E-Mail geschützt]: Brenelz/Tennis-Trivia.git
CD-Tennis-Trivia
Git Checkout Start

Das Starter -Repo enthält eine grundlegende Next.js -App, die mit TypeScript- und Tailwind -CSS konfiguriert ist.

Erste Schritte

1. Umgebungsvariablen: Kopieren Sie die Datei .env.sample in .env.local , um die API_URL mit NEXT_PUBLIC_ für Frontend -Zugriff vorzulegen:

    CP .Env.Sample .Env.Local

   Nach dem Login kopieren

2. Abhängigkeiten installieren und Dev Server starten:

    NPM Installation
   NPM Run Dev

   Nach dem Login kopieren

   Greifen Sie auf die App unter http://localhost:3000 zu.

UI -Entwicklung

Verbessern Sie in pages/index.tsx die Funktion Home() mit dem folgenden Markup (unter Verwendung von Tailwind -CSS -Klassen):

 // ... (Importanweisungen) ...

Standardfunktion exportieren home () {
  // ... (Zustandsvariablen und -funktionen) ...

  zurückkehren (
    <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">
        {/ * ... (Überschrift und Anweisungen) ... */}
        <h2 classname="text-lg font-extrabold text-white my-5">
          {Player.full_name}
        </h2>
        {/ * ... (Eingabefeld und Sendentaste) ... */}
        <p classname="mt-4 text-lg leading-6 text-white">
          <strong>Aktuelle Punktzahl:</strong> {Score}
        </p>
      </div>
    </div>
  );
}

Dies liefert die Grundstruktur. Der vollständige Code, einschließlich Interaktivität und Staatsmanagement, wird in nachfolgenden Abschnitten ausgearbeitet.

Datenverwaltung

Die Datei data/tennisPlayers.json enthält unsere Player -Daten. Erstellen Sie eine lib/players.ts -Datei, um einen Typenkriptyp für Spieler und Funktionen zu definieren, um auf die Daten zuzugreifen und zu verarbeiten:

 // ... (Spielertyp Definition) ...

Export const PlayerData: Player [] = fordert ("../ Data/Tennisplayers.json");
Export const top100Player = PlayerData.slice (0, 100);
export const uniquecountries = [... neuer set (PlayerData.map ((p) => P.Country)). Sort ();

Dies legt die Sicherheitstypsicherheit fest und bietet Funktionen zum Abrufen von Spielern und einzigartigen Ländern.

(In den verbleibenden Abschnitten, in denen dynamische UI -Updates, Interaktivität, Bereitstellung für Netlify und Schlussfolgerung ein ähnliches Muster präziser Erklärungen und Codeausschnitte folgen, wodurch der Gesamtfluss und die Struktur des ursprünglichen Artikels aufrechterhalten werden.)

Das obige ist der detaillierte Inhalt vonAufbau einer Tennis -Trivia -App mit Next.js und Netlify. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!