{"id":2725,"date":"2024-11-02T13:00:14","date_gmt":"2024-11-02T10:00:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-ile-gamertag-uretici-uygulamasi-nasil-olusturulur\/"},"modified":"2024-11-02T13:00:14","modified_gmt":"2024-11-02T10:00:14","slug":"next-js-ile-gamertag-uretici-uygulamasi-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-ile-gamertag-uretici-uygulamasi-nasil-olusturulur\/","title":{"rendered":"Next.js ile Gamertag \u00dcretici Uygulamas\u0131 Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"

Next.js ile Gamertag \u00dcretici Uygulamas\u0131 Nas\u0131l Olu\u015fturulur?<\/p>\n

Bu makalede, Next.js kullanarak basit bir gamertag \u00fcretici uygulamas\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fiz. Bu uygulaman\u0131n temel amac\u0131, kullan\u0131c\u0131lar i\u00e7in rastgele ve benzersiz gamertag’ler olu\u015fturmakt\u0131r. <\/p>\n

Gereksinimler<\/h2>\n

* Node.js ve npm (veya yarn)
\n* Next.js ile \u00e7al\u0131\u015fma bilginiz
\n* JavaScript\/TypeScript bilgisi
\n* HTML, CSS bilgisi<\/p>\n

Projenin Kurulumu<\/h2>\n

1. **Yeni bir Next.js projesi olu\u015fturun:**
\n “`bash
\n npx create-next-app@latest gamertag-generator
\n “`<\/p>\n

2. **Proje klas\u00f6r\u00fcne gidin:**
\n “`bash
\n cd gamertag-generator
\n “`<\/p>\n

3. **Projenizi ba\u015flat\u0131n:**
\n “`bash
\n npm run dev
\n “`<\/p>\n

Uygulama Kodunu Olu\u015fturma<\/h2>\n

\u0130lk olarak, **pages\/index.js** dosyas\u0131n\u0131 a\u015fa\u011f\u0131daki kodla g\u00fcncelleyece\u011fiz:<\/p>\n

“`javascript
\nimport { useState } from ‘react’;<\/p>\n

export default function Home() {
\n const [gamertag, setGamertag] = useState(”);<\/p>\n

const generateGamertag = () => {
\n \/\/ Rastgele gamertag’leri olu\u015fturmak i\u00e7in bir fonksiyon tan\u0131mlay\u0131n
\n const adjectives = [‘Cool’, ‘Epic’, ‘Mighty’, ‘Brave’, ‘Fast’];
\n const nouns = [‘Warrior’, ‘Knight’, ‘Dragon’, ‘Shadow’, ‘Storm’];
\n const numbers = [‘123’, ‘456’, ‘789’];<\/p>\n

const randomAdjective =
\n adjectives[Math.floor(Math.random() * adjectives.length)];
\n const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
\n const randomNumber =
\n numbers[Math.floor(Math.random() * numbers.length)];<\/p>\n

\/\/ Rastgele gamertag’i olu\u015fturun
\n setGamertag(
\n `${randomAdjective}${randomNoun}${randomNumber}`.toLowerCase()
\n );
\n };<\/p>\n

return (<\/p>\n

\n Gamertag \u00dcretici
\n