如何使用 Next.js 建立玩家標籤產生器應用

建立玩家標籤產生器應用程式可以是一個有趣的實作項目，可讓您在建立遊戲玩家可能實際使用的東西的同時發揮您的 Next.js 技能。

玩家標籤產生器製作起來非常簡單，並提供了一種使用組件、表單和一些簡單隨機化的好方法。

到此結束，您將擁有一個可以運行的應用程序，它可以根據一些輸入首選項為遊戲玩家生成很酷、獨特的名稱。讓我們使用 Next.js 逐步完成設定。

為什麼這個專案需要 Next.js？

Next.js 是建立此類應用程式的絕佳選擇。它是一個功能強大的 React 框架，使路由變得輕而易舉，提供伺服器端渲染（如果你擴展它會很方便），並且內建了對 API 路由的支援。另外，如果您已經熟悉 JavaScript 和 React，那麼學習起來很容易。

項目設定

在深入研究程式碼之前，請確保您的電腦上安裝了 Node.js 和 npm（或 Yarn）。如果沒有，請前往 Node.js 並下載最新版本。設定完成後，請依照下列步驟操作：

1. 建立一個新的 Next.js 專案
   
   開啟終端機並運作：

   npx create-next-app gamertag-generator
   

   登入後複製

   登入後複製

   這將在名為 gamertag-generator 的資料夾中建立一個新的 Next.js 專案。安裝完成後，導覽至您的專案目錄：

   cd gamertag-generator
   

   登入後複製

   登入後複製

2. 啟動開發伺服器
   
   啟動開發伺服器以確保一切正常運作：

   npm run dev
   

   登入後複製

   登入後複製

   這應該會在 http://localhost:3000 上啟動您的 Next.js 應用程式。在瀏覽器中開啟該 URL 以確認您已啟動並正在執行。

設計玩家標籤產生器

我們的應用程式將包含一個簡單的表單，使用者可以在其中選擇一些選項（例如首選長度或主題）和一個用於產生玩家代號的按鈕。當他們點擊「生成」時，我們將根據他們的選擇顯示隨機玩家代號。

以下是我們將要介紹的內容：

• 依照使用者偏好設定表單。
• 建立隨機名稱產生器函數。
• 顯示產生的玩家代號。

讓我們分解每個部分。

建構使用者介面

首先，開啟pages/index.js。這是主頁的主文件。清除 Next.js 隨附的預設程式碼，以便您可以重新開始。這是一個簡單的模板：

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}

  )}

);
}