Construire une application de trivia de tennis avec next.js et netlify

Ce tutoriel démontre la création d'une application de trivia de tennis amusante en utilisant Next.js et Netlify, une combinaison puissante pour le développement rapide et le déploiement transparent. Plongeons-nous!

Pile technologique

Nous allons tirer parti:

• Next.js: un cadre React pour la création d'applications Web. Ses fonctionnalités telles que le rendu côté serveur et le développement de rationalisation de routage intégré.
• Netlify: une plate-forme de déploiement des applications Web sans effort. Ses fonctions sans serveur et son processus de déploiement simple sont des avantages clés.
• TypeScript: ajoute un typage statique à JavaScript, l'amélioration de la maintenabilité du code et la réduction des erreurs.
• Tailwind CSS: un cadre CSS d'abord de l'utilitaire pour le développement rapide de l'interface utilisateur.

Pourquoi next.js et netlify?

Bien qu'une application de trivia simple puisse ne pas nécessiter de framework React, Next.js offre des avantages significatifs: WebPack préconfiguré, getServerSideProps pour la récupération des données côté serveur et l'intégration transparente avec les fonctions sans serveur de Netlify. NetLify simplifie le processus de déploiement, ce qui rend incroyablement facile de déployer une application Next.js à partir d'un référentiel GIT.

Aperçu de l'application

Le jeu Trivia présente le nom d'un joueur de tennis et vous devinez leur pays d'origine. Le jeu se compose de cinq tours, suivant votre score. Au lieu d'une API en direct, nous utiliserons un fichier JSON local (inclus dans le dépôt de démarrage) contenant des données de joueur provenant de RapidAPI.

Une version déployée est disponible sur Netlify (lien à ajouter ici).

Dépôt de démarrage

Pour suivre, cloner le référentiel et passer à la branche start :

 Git Clone [Protégé par e-mail]: Brenelz / Tennis-Trivia.git
CD Tennis-trivia
Démarrage de la caisse de Git

Le dépôt de démarrage comprend une application de base Next.js, configurée avec TypeScript et Tailwind CSS.

Commencer

1. Variables d'environnement: Copiez le fichier .env.sample à .env.local , préfixant l' API_URL avec NEXT_PUBLIC_ pour l'accès Frontend:

    cp .env.sample .env.local

   Copier après la connexion

2. Installer les dépendances et démarrer le serveur de développement:

    Installation de NPM
   NPM Run Dev

   Copier après la connexion

   Accédez à l'application sur http://localhost:3000 .

Développement de l'interface utilisateur

Dans pages/index.tsx , améliorez la fonction Home() avec le balisage suivant (en utilisant les classes CSS de Tailwind):

 // ... (instructions d'importation) ...

Exporter la fonction default home () {
  // ... (variables et fonctions d'état) ...

  retour (
    <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">
        {/ * ... (en-tête et instructions) ... * /}
        <h2 classname="text-lg font-extrabold text-white my-5">
          {joueur.full_name}
        </h2>
        {/ * ... (champ de saisie et bouton de soumission) ... * /}
        <p classname="mt-4 text-lg leading-6 text-white">
          <strong>Score actuel:</strong> {score}
        </p>
      </div>
    </div>
  ));
}

Cela fournit la structure de base. Le code complet, y compris l'interactivité et la gestion de l'État, sera élaboré dans les sections suivantes.

Gestion des données

Le fichier data/tennisPlayers.json contient nos données de lecteur. Créez un fichier lib/players.ts pour définir un type de type dactylographié pour les joueurs et les fonctions pour accéder et traiter les données:

 // ... (Définition du type de joueur) ...

Export const PlayerData: Player [] = require ("../ data / tennisplayers.json");
Export const top100players = playerData.slice (0, 100);
Export Const UniqueCounTries = [... Nouveau set (PlayerData.Map ((P) => P.Country))]. Sort ();

Cela met en place la sécurité du type et offre des fonctions pour récupérer les joueurs et les pays uniques.

(Les sections restantes détaillant les mises à jour dynamiques de l'interface utilisateur, l'interactivité, le déploiement vers Netlify et la conclusion suivront un modèle similaire d'explications concises et d'extraits de code, en maintenant le flux et la structure globaux de l'article d'origine.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!