{"id":8334,"date":"2025-01-01T19:00:16","date_gmt":"2025-01-01T16:00:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/gemini-api-next-js-ve-tailwindcss-ile-yapay-zeka-destekli-tweet-olusturma-projesi\/"},"modified":"2025-01-01T19:00:16","modified_gmt":"2025-01-01T16:00:16","slug":"gemini-api-next-js-ve-tailwindcss-ile-yapay-zeka-destekli-tweet-olusturma-projesi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gemini-api-next-js-ve-tailwindcss-ile-yapay-zeka-destekli-tweet-olusturma-projesi\/","title":{"rendered":"Gemini API, Next.js ve TailwindCSS ile Yapay Zeka Destekli Tweet Olu\u015fturma Projesi"},"content":{"rendered":"

<\/p>\n

Gemini API, Next.js ve TailwindCSS ile Yapay Zeka Destekli Tweet Olu\u015fturma Projesi<\/p>\n

Merhaba! Ben Fatih Soysal. Bu yaz\u0131da, Google’\u0131n g\u00fc\u00e7l\u00fc dil modeli Gemini API’sini, performans odakl\u0131 Next.js framework’\u00fcn\u00fc ve modern tasar\u0131m dili Tailwind CSS’i kullanarak, yapay zeka destekli tweet olu\u015fturma projesinin nas\u0131l geli\u015ftirilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Bu proje, hem yapay zeka teknolojileriyle hem de modern web geli\u015ftirme ara\u00e7lar\u0131yla tan\u0131\u015fmak isteyenler i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n

Proje A\u015famalar\u0131<\/h2>\n

\u00d6ncelikle, projemizin temel yap\u0131 ta\u015flar\u0131n\u0131 ele alal\u0131m. \u0130lk ad\u0131m, gerekli k\u00fct\u00fcphaneleri ve API anahtarlar\u0131m\u0131z\u0131 haz\u0131rlamak olacak. Ard\u0131ndan, Next.js projemizi kurup, Tailwind CSS entegrasyonunu yapaca\u011f\u0131z. Sonras\u0131nda, Gemini API ile etkile\u015fim kuracak fonksiyonlar\u0131m\u0131z\u0131 yazaca\u011f\u0131z. \u00d6nemli Not:<\/b> Gemini API’ye eri\u015fim i\u00e7in Google Cloud hesab\u0131n\u0131z olmas\u0131 ve API anahtar\u0131n\u0131z\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131rman\u0131z gerekmektedir.<\/p>\n

1. Gerekli Kurulumlar<\/h3>\n

Projemize ba\u015flamadan \u00f6nce, Node.js ve npm’nin sisteminizde kurulu oldu\u011fundan emin olmal\u0131s\u0131n\u0131z. Ard\u0131ndan, a\u015fa\u011f\u0131daki komutlarla Next.js projemizi olu\u015fturabiliriz:<\/p>\n

\nnpx create-next-app my-ai-tweet-generator\ncd my-ai-tweet-generator\n<\/code><\/pre>\n
Next.js projesini kurduktan sonra, Tailwind CSS’i entegre edelim.  Tailwind’in resmi dok\u00fcmanlar\u0131nda detayl\u0131 kurulum ad\u0131mlar\u0131 bulabilirsiniz.  K\u0131saca, Tailwind’i kurup,  tailwind.config.js<\/code> dosyas\u0131n\u0131 yap\u0131land\u0131rd\u0131ktan sonra, CSS dosyalar\u0131n\u0131za Tailwind s\u0131n\u0131flar\u0131n\u0131 kullanmaya ba\u015flayabilirsiniz.<\/p>\n
2. Gemini API Entegrasyonu<\/h3>\n
Bu ad\u0131mda,  Gemini API ile ileti\u015fim kurmak i\u00e7in bir fonksiyon olu\u015fturaca\u011f\u0131z.  Bu fonksiyon,  kullan\u0131c\u0131n\u0131n girdi\u011fi bir metin istemini Gemini’ye g\u00f6nderecek ve ald\u0131\u011f\u0131 yan\u0131t\u0131 i\u015fleyerek tweet olarak formatlayacakt\u0131r.  \u0130\u015fte \u00f6rnek bir fonksiyon:<\/p>\n
\n\/\/ pages\/api\/generateTweet.js\nexport default async function handler(req, res) {\n  const { prompt } = req.body;\n  \/\/ Gemini API \u00e7a\u011fr\u0131s\u0131 burada yap\u0131l\u0131r...\n  const response = await fetch('YOUR_GEMINI_API_ENDPOINT', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application\/json',\n      'Authorization': 'Bearer YOUR_API_KEY',\n    },\n    body: JSON.stringify({ prompt }),\n  });\n  const data = await response.json();\n  res.status(200).json({ tweet: data.generated_text });\n}\n<\/code><\/pre>\n
Bu \u00f6rnekte,  YOUR_GEMINI_API_ENDPOINT<\/code> ve YOUR_API_KEY<\/code> yerine kendi API endpoint’inizi ve API anahtar\u0131n\u0131z\u0131 yazmal\u0131s\u0131n\u0131z.  Fonksiyon,  kullan\u0131c\u0131n\u0131n girdi\u011fi istemi API’ye g\u00f6nderir ve gelen yan\u0131t\u0131 JSON format\u0131nda geri d\u00f6nd\u00fcr\u00fcr.<\/p>\n
3.  Next.js Uygulamas\u0131n\u0131n Geli\u015ftirilmesi<\/h3>\n
Son ad\u0131mda,  Next.js ile kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturaca\u011f\u0131z.  Kullan\u0131c\u0131,  tweet i\u00e7in bir istem girebilecek ve “Tweet Olu\u015ftur” butonuna t\u0131klayarak Gemini API’den yan\u0131t alabilecektir.  Tailwind CSS ile aray\u00fcz\u00fc modern ve \u015f\u0131k bir \u015fekilde tasarlayabiliriz.  Olu\u015fturulan tweet,  kullan\u0131c\u0131ya g\u00f6sterilecek ve istenirse kopyalanabilecektir.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu proje,  yapay zeka ve modern web geli\u015ftirme teknolojilerini bir araya getirmenin g\u00fczel bir \u00f6rne\u011fidir.  Umar\u0131m bu rehber,  kendi yapay zeka destekli tweet olu\u015fturma projenizi geli\u015ftirmenizde yard\u0131mc\u0131 olur. Daha detayl\u0131 bilgi ve \u00f6rnek projeler i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.  Ayr\u0131ca,  Gemini API ve Next.js dok\u00fcmanlar\u0131na g\u00f6z atman\u0131z\u0131 \u00f6neririm.  Ba\u015far\u0131lar!<\/p>\n
Faydal\u0131 bulabilece\u011finiz kaynaklar:<\/p>\n