So erstellen Sie eine Gamertag-Generator-App mit Next.js

Das Erstellen einer Gamertag-Generator-App kann ein unterhaltsames, praktisches Projekt sein, bei dem Sie Ihre Next.js-Fähigkeiten verbessern und gleichzeitig etwas entwickeln können, das Gamer tatsächlich nutzen könnten.

Ein Gamertag-Generator ist ziemlich einfach zu erstellen und bietet eine großartige Möglichkeit, mit Komponenten, Formen und einigen einfachen Randomisierungen zu arbeiten.

Am Ende haben Sie eine funktionierende App, die auf der Grundlage einiger Eingabepräferenzen coole, einzigartige Namen für Gamer generieren kann. Lassen Sie uns die Einrichtung Schritt für Schritt mit Next.js durchgehen.

Warum Next.js für dieses Projekt?

Next.js ist eine gute Wahl für die Erstellung dieser Art von Anwendung. Es handelt sich um ein leistungsstarkes React-Framework, das das Routing zum Kinderspiel macht, serverseitiges Rendering bietet (was bei einer Skalierung praktisch sein kann) und integrierte Unterstützung für API-Routen bietet. Außerdem ist es leicht zu erlernen, wenn Sie bereits mit JavaScript und React vertraut sind.

Projekt-Setup

Bevor Sie in den Code eintauchen, stellen Sie sicher, dass Node.js und npm (oder Yarn) auf Ihrem Computer installiert sind. Wenn nicht, gehen Sie zu Node.js und laden Sie die neueste Version herunter. Sobald Sie fertig sind, befolgen Sie diese Schritte:

1. Erstellen Sie ein neues Next.js-Projekt
   
   Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

   npx create-next-app gamertag-generator
   

   Nach dem Login kopieren

   Nach dem Login kopieren

   Dadurch wird ein neues Next.js-Projekt in einem Ordner namens gamertag-generator erstellt. Navigieren Sie nach Abschluss der Installation zu Ihrem Projektverzeichnis:

   cd gamertag-generator
   

   Nach dem Login kopieren

   Nach dem Login kopieren

2. Starten Sie den Entwicklungsserver
   
   Starten Sie den Entwicklungsserver, um sicherzustellen, dass alles läuft:

   npm run dev
   

   Nach dem Login kopieren

   Nach dem Login kopieren

   Dies sollte Ihre Next.js-App unter http://localhost:3000 starten. Öffnen Sie diese URL in Ihrem Browser, um zu bestätigen, dass Sie aktiv sind.

Entwerfen des Gamertag-Generators

Unsere App besteht aus einem einfachen Formular, in dem Benutzer einige Optionen auswählen können (z. B. bevorzugte Länge oder Themen) und einer Schaltfläche zum Generieren des Gamertags. Wenn sie auf „Generieren“ klicken, zeigen wir basierend auf ihrer Auswahl einen zufälligen Gamertag an.

Folgendes werden wir behandeln:

• Einrichten des Formulars für Benutzereinstellungen.
• Erstellen einer Zufallsnamengeneratorfunktion.
• Anzeige des generierten Gamertags.

Lassen Sie uns jeden Teil aufschlüsseln.

Erstellen der Benutzeroberfläche

Öffnen Sie zunächst „pages/index.js“. Dies ist Ihre Hauptdatei für die Homepage. Löschen Sie den Standardcode, der mit Next.js geliefert wird, damit Sie neu beginnen können. Hier ist eine einfache Vorlage, um loszulegen:

import { useState } from 'react';

<p>export default function Home() {<br>
  const [gamertag, setGamertag] = useState('');<br>
  const [length, setLength] = useState(8);<br>
  const [theme, setTheme] = useState('random');</p>

<p>const generateGamertag = () => {<br>
    // We'll create this function in the next section<br>
  };</p>

<p>return (</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext">  Gamertag Generator
  Create a unique gamertag based on your preferences!



      Gamertag Length:
       setLength(e.target.value)} 
        min="4" 
        max="15" 
      />



      Theme:
       setTheme(e.target.value)}>
        Random
        Fantasy
        Tech
        Animals


  Generate

  {gamertag &amp;&amp; (

      Your Gamertag:
      {gamertag}

  )}

);
}