如何使用 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='brush:php;toolbar:false;'>  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 && (

      Your Gamertag:
      {gamertag}

  )}

);
}