Cara Membuat Apl Penjana Gamertag Menggunakan Next.js

Membuat apl penjana gamertag boleh menjadi projek praktikal yang menyeronokkan yang membolehkan anda melenturkan kemahiran Next.js anda sambil membina sesuatu yang mungkin digunakan oleh pemain.

Penjana gamertag agak mudah dibuat dan menawarkan cara yang bagus untuk bekerja dengan komponen, borang dan beberapa rawak mudah.

Menjelang akhir ini, anda akan mempunyai apl yang berfungsi yang boleh menjana nama unik dan menarik untuk pemain berdasarkan beberapa pilihan input. Mari kita lihat persediaan, langkah demi langkah, menggunakan Next.js.

Mengapa Next.js untuk Projek Ini?

Next.js ialah pilihan yang bagus untuk membina aplikasi jenis ini. Ia merupakan rangka kerja React yang berkuasa yang menjadikan penghalaan mudah, menawarkan pemaparan sebelah pelayan (yang boleh digunakan jika anda meningkatkan ini) dan mempunyai sokongan terbina dalam untuk laluan API. Selain itu, mudah untuk dipelajari jika anda sudah selesa dengan JavaScript dan React.

Persediaan Projek

Sebelum anda menyelami kod, pastikan anda memasang Node.js dan npm (atau Benang) pada mesin anda. Jika tidak, pergi ke Node.js dan muat turun versi terkini. Setelah anda menetapkan, ikut langkah ini:

1. Buat Projek Next.js Baharu
   
   Buka terminal anda dan jalankan:

   npx create-next-app gamertag-generator
   

   Ini akan mencipta projek Next.js baharu dalam folder bernama gamertag-generator. Setelah pemasangan selesai, navigasi ke direktori projek anda:

   cd gamertag-generator
   

2. Mulakan Pelayan Pembangunan
   
   Nyalakan pelayan pembangunan untuk memastikan semuanya berjalan:

   npm run dev
   

   Ini sepatutnya memulakan apl Next.js anda di http://localhost:3000. Buka URL tersebut dalam penyemak imbas anda untuk mengesahkan bahawa anda sedang beroperasi.

Mereka bentuk Penjana Gamertag

Apl kami akan terdiri daripada bentuk ringkas yang membolehkan pengguna memilih beberapa pilihan (seperti panjang atau tema pilihan) dan butang untuk menjana gamertag. Apabila mereka mengklik "Jana," kami akan memaparkan gamertag rawak berdasarkan pilihan mereka.

Ini perkara yang akan kami bincangkan:

• Menyediakan borang untuk pilihan pengguna.
• Mencipta fungsi penjana nama rawak.
• Memaparkan gamertag yang dijana.

Mari pecahkan setiap bahagian.

Membina Antara Muka Pengguna

Untuk memulakan, buka halaman/index.js. Ini ialah fail utama anda untuk halaman utama. Kosongkan kod lalai yang disertakan dengan Next.js, supaya anda boleh mula baharu. Berikut ialah templat mudah untuk meneruskan:

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}

  )}

);
}