This content originally appeared on DEV Community and was authored by CodeItBro
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:
-
Create a New Next.js Project
Open your terminal and run:npx create-next-app gamertag-generatorThis 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 -
Start the Development Server
Fire up the development server to make sure everything is running:npm run devThis 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!
This content originally appeared on DEV Community and was authored by CodeItBro
CodeItBro | Sciencx (2024-11-02T09:49:14+00:00) How to Create a Gamertag Generator App Using Next.js. Retrieved from https://www.scien.cx/2024/11/02/how-to-create-a-gamertag-generator-app-using-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.