How to Create a Gamertag Generator App Using Next.js

Creating a gamertag generator app can be a fun, hands-on project that lets you flex your Next.js skills while building something gamers might actually use.

A gamertag generator is pretty straightforward to make and offers a great way to work with components, forms, and some simple randomization.

By the end of this, you’ll have a working app that can generate cool, unique names for gamers based on a few input preferences. Let’s walk through the setup, step-by-step, using Next.js.

Why Next.js for This Project?

Next.js is a great choice for building this type of application. It's a powerful React framework that makes routing a breeze, offers server-side rendering (which can be handy if you scale this up), and has built-in support for API routes. Plus, it’s easy to learn if you’re already comfortable with JavaScript and React.

Project Setup

Before you dive into the code, make sure you have Node.js and npm (or Yarn) installed on your machine. If you don’t, head over to Node.js and download the latest version. Once you’re set, follow these steps:

1. Create a New Next.js Project
   
   Open your terminal and run:

   npx create-next-app gamertag-generator
   

   This will create a new Next.js project in a folder named gamertag-generator. Once the installation finishes, navigate to your project directory:

   cd gamertag-generator
   

2. Start the Development Server
   
   Fire up the development server to make sure everything is running:

   npm run dev
   

   This should start your Next.js app on http://localhost:3000. Open that URL in your browser to confirm you’re up and running.

Designing the Gamertag Generator

Our app will consist of a simple form where users can pick a few options (like preferred length or themes) and a button to generate the gamertag. When they click "Generate," we’ll display a random gamertag based on their choices.

Here’s what we’ll cover:

• Setting up the form for user preferences.
• Creating a random name generator function.
• Displaying the generated gamertag.

Let’s break down each part.

Building the User Interface

To start, open up pages/index.js. This is your main file for the homepage. Clear out the default code that comes with Next.js, so you can start fresh. Here’s a simple template to get going:

import { useState } from 'react';

export default function Home() {

  const [gamertag, setGamertag] = useState('');

  const [length, setLength] = useState(8);

  const [theme, setTheme] = useState('random');

const generateGamertag = () => {

    // We'll create this function in the next section

  };

return (

  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}

  )}



    

    




);

}

Creating the Gamertag Generator Logic

Let’s dive into the heart of the app: the gamertag generation function. Add this function inside the generateGamertag function placeholder.

const generateGamertag = () => {

  const themes = {

    random: ['Shadow', 'Blaze', 'Storm', 'Wolf', 'Knight', 'Rogue', 'Phantom', 'Bolt'],

    fantasy: ['Dragon', 'Elf', 'Mage', 'Wizard', 'Goblin', 'Orc', 'Knight', 'Phoenix'],

    tech: ['Byte', 'Pixel', 'Cyber', 'Matrix', 'Neo', 'Hex', 'Quantum', 'Circuit'],

    animals: ['Tiger', 'Eagle', 'Shark', 'Lion', 'Wolf', 'Panther', 'Falcon', 'Bear'],

  };

const selectedTheme = themes[theme] || themes['random'];

  const randomWord = selectedTheme[Math.floor(Math.random() * selectedTheme.length)];

  const gamertag = randomWord + Math.floor(Math.random() * 1000).toString().padStart(3, '0');

setGamertag(gamertag);

};

Putting It All Together

Now that we have our user interface and the generation logic, we just need to combine them in pages/index.js. Here’s the complete code:

import { useState } from 'react';

export default function Home() {

  const [gamertag, setGamertag] = useState('');

  const [length, setLength] = useState(8);

  const [theme, setTheme] = useState('random');

const generateGamertag = () => {

    const themes = {

      random: ['Shadow', 'Blaze', 'Storm', 'Wolf', 'Knight', 'Rogue', 'Phantom', 'Bolt'],

      fantasy: ['Dragon', 'Elf', 'Mage', 'Wizard', 'Goblin', 'Orc', 'Knight', 'Phoenix'],

      tech: ['Byte', 'Pixel', 'Cyber', 'Matrix', 'Neo', 'Hex', 'Quantum', 'Circuit'],

      animals: ['Tiger', 'Eagle', 'Shark', 'Lion', 'Wolf', 'Panther', 'Falcon', 'Bear'],

    };

const selectedTheme = themes[theme] || themes['random'];
const randomWord = selectedTheme[Math.floor(Math.random() * selectedTheme.length)];
const gamertag = randomWord + Math.floor(Math.random() * 1000).toString().padStart(3, '0');

setGamertag(gamertag);



    

    




};

return (

  Gamertag Generator
  Create a unique gamertag based on your preference!
      Gamertag Length:
       setLength(e.target.value)} 
        min="4" 
        max="15" 
      />


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

  Generate

  {gamertag && (

      Your Gamertag:
      {gamertag}

  )}



    

    




);

}

Conclusion

Congratulations! You’ve built a simple but functional gamertag generator using Next.js.

This app can be a great starting point. You can expand its features by adding more themes, incorporating user authentication, or even saving favorite gamertags.

Play around with the code and see what unique features you can come up with!