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}

  )}

);
}