{"id":31647,"date":"2025-10-12T08:41:05","date_gmt":"2025-10-12T05:41:05","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31647"},"modified":"2025-10-12T08:41:05","modified_gmt":"2025-10-12T05:41:05","slug":"gatsby-ve-typescript-ile-kitapci-acilis-sayfasi-landing-page-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gatsby-ve-typescript-ile-kitapci-acilis-sayfasi-landing-page-nasil-olusturulur\/","title":{"rendered":"Gatsby ve TypeScript ile Kitap\u00e7\u0131 A\u00e7\u0131l\u0131\u015f Sayfas\u0131 (Landing Page) Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"<\/p>\n
Gatsby ve TypeScript ile Kitap\u00e7\u0131 A\u00e7\u0131l\u0131\u015f Sayfas\u0131 (Landing Page) Nas\u0131l Olu\u015fturulur?<\/h2>\n
Giri\u015f<\/h3>\n
Dijital \u00e7a\u011fda, her i\u015fletmenin \u00e7evrimi\u00e7i bir varl\u0131\u011fa sahip olmas\u0131 hayati \u00f6nem ta\u015f\u0131maktad\u0131r. Kitap\u00e7\u0131lar da bu kural\u0131n bir istisnas\u0131 de\u011fildir. Yeni bir kitap\u00e7\u0131n\u0131n lansman\u0131, \u00f6zel bir kampanya duyurusu veya yazar etkinli\u011fi gibi durumlar i\u00e7in etkili bir a\u00e7\u0131l\u0131\u015f sayfas\u0131 (landing page), potansiyel m\u00fc\u015fterilere ula\u015fman\u0131n ve onlar\u0131 etkile\u015fime te\u015fvik etmenin en g\u00fc\u00e7l\u00fc yollar\u0131ndan biridir. Bu makalede, modern web geli\u015ftirme d\u00fcnyas\u0131n\u0131n \u00f6nde gelen teknolojilerinden Gatsby ve TypeScript kullanarak, y\u00fcksek performansl\u0131, SEO dostu ve bak\u0131m\u0131 kolay bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131 olu\u015fturman\u0131n ad\u0131mlar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Gatsby, React tabanl\u0131 statik site olu\u015fturucu (Static Site Generator – SSG) olarak, h\u0131z, g\u00fcvenlik ve \u00f6l\u00e7eklenebilirlik gibi avantajlar sunarken, TypeScript ise JavaScript’e tip g\u00fcvenli\u011fi ekleyerek daha sa\u011flam, okunabilir ve s\u00fcrd\u00fcr\u00fclebilir kod yazmam\u0131z\u0131 sa\u011flar. Bu kombinasyon, \u00f6zellikle b\u00fcy\u00fck ekiplerle \u00e7al\u0131\u015f\u0131rken veya uzun vadeli projelerde hata oran\u0131n\u0131 azaltmada ve geli\u015ftirici deneyimini iyile\u015ftirmede \u00f6nemli faydalar sunar. Bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131, genellikle yeni \u00e7\u0131kan kitaplar\u0131, \u00f6ne \u00e7\u0131kan yazarlar\u0131, \u00f6zel indirimleri veya etkinlikleri sergileyen, tek odakl\u0131 bir pazarlama arac\u0131d\u0131r. Bu t\u00fcr bir sayfa, kullan\u0131c\u0131lar\u0131 belirli bir eyleme (\u00f6rne\u011fin, b\u00fcltene abone olma, yeni kitaplara g\u00f6z atma veya bir etkinli\u011fe kaydolma) y\u00f6nlendirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu rehberde, bu hedeflere ula\u015fmak i\u00e7in gerekli t\u00fcm teknik ad\u0131mlar\u0131 ele alaca\u011f\u0131z.<\/p>\n
Gatsby ve TypeScript Neden Tercih Edilmeli?<\/h3>\n
Bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131 gibi pazarlama odakl\u0131 bir proje i\u00e7in Gatsby ve TypeScript se\u00e7imi, bir\u00e7ok stratejik avantaj\u0131 beraberinde getirir. Bu b\u00f6l\u00fcmde, bu teknolojilerin sundu\u011fu temel faydalar\u0131 detayland\u0131raca\u011f\u0131z.<\/p>\n
Gatsby’nin Avantajlar\u0131<\/h4>\n
Gatsby, modern web siteleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r ve \u00f6zellikle a\u00e7\u0131l\u0131\u015f sayfalar\u0131 i\u00e7in idealdir:<\/p>\n
\n
\u00dcst\u00fcn Performans:<\/strong> Gatsby, \u00f6nceden olu\u015fturulmu\u015f (pre-built) statik HTML dosyalar\u0131 sunarak sayfa y\u00fckleme s\u00fcrelerini minimuma indirir. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve arama motoru s\u0131ralamalar\u0131n\u0131 olumlu etkiler. Resim optimizasyonu, kod b\u00f6lme (code splitting) ve lazy loading gibi yerle\u015fik optimizasyonlar sayesinde siteler, Lighthouse gibi performans testlerinde y\u00fcksek puanlar al\u0131r. Bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131nda g\u00f6rsellerin (kitap kapaklar\u0131 vb.) yo\u011fun kullan\u0131ld\u0131\u011f\u0131 d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde, bu \u00f6zellik kritik \u00f6neme sahiptir.<\/li>\n
Geli\u015fmi\u015f SEO:<\/strong> Statik HTML, arama motorlar\u0131n\u0131n sitenizi daha kolay ve verimli bir \u015fekilde taramas\u0131na olanak tan\u0131r. H\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve optimize edilmi\u015f i\u00e7erik yap\u0131s\u0131, anahtar kelime s\u0131ralamalar\u0131nda avantaj sa\u011flar. Gatsby’nin meta etiket y\u00f6netimi i\u00e7in sundu\u011fu eklentilerle, her sayfa i\u00e7in \u00f6zelle\u015ftirilmi\u015f SEO ba\u015fl\u0131klar\u0131, a\u00e7\u0131klamalar\u0131 ve sosyal medya payla\u015f\u0131mlar\u0131 (Open Graph) kolayca yap\u0131land\u0131r\u0131labilir.<\/li>\n
Geli\u015ftirici Deneyimi:<\/strong> React ekosistemine dayanmas\u0131 sayesinde, React geli\u015ftiricileri Gatsby ile h\u0131zl\u0131ca adapte olabilir. GraphQL tabanl\u0131 veri katman\u0131, farkl\u0131 kaynaklardan (yerel dosyalar, CMS’ler, API’ler) verileri tek bir yerden \u00e7ekmeyi ve y\u00f6netmeyi son derece kolayla\u015ft\u0131r\u0131r. Zengin eklenti ekosistemi, \u00e7e\u015fitli i\u015flevsellikleri (resim i\u015fleme, veri kaynaklar\u0131, stil y\u00f6netimi) projeye entegre etmeyi basitle\u015ftirir.<\/li>\n
G\u00fcvenlik:<\/strong> Statik siteler, sunucu taraf\u0131nda herhangi bir dinamik i\u015flem veya veritaban\u0131 ba\u011flant\u0131s\u0131 gerektirmedi\u011fi i\u00e7in geleneksel dinamik sitelere g\u00f6re \u00e7ok daha g\u00fcvenlidir. Bu, potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n
Maliyet Etkinli\u011fi:<\/strong> Statik siteler, genellikle CDN’ler (Content Delivery Network) veya uygun maliyetli statik hosting servisleri (Netlify, Vercel, GitHub Pages) \u00fczerinden da\u011f\u0131t\u0131labilir. Bu, sunucu maliyetlerini \u00f6nemli \u00f6l\u00e7\u00fcde d\u00fc\u015f\u00fcr\u00fcr.<\/li>\n<\/ul>\n
TypeScript’in Avantajlar\u0131<\/h4>\n
TypeScript, JavaScript’in s\u00fcper k\u00fcmesi olarak, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde geli\u015ftirme s\u00fcrecine de\u011fer katan bir dizi avantaj sunar:<\/p>\n
\n
Tip G\u00fcvenli\u011fi:<\/strong> TypeScript’in en b\u00fcy\u00fck avantaj\u0131, kodunuzu derleme zaman\u0131nda tip hatalar\u0131na kar\u015f\u0131 kontrol etmesidir. Bu, \u00e7al\u0131\u015fma zaman\u0131nda ortaya \u00e7\u0131kabilecek bir\u00e7ok hatay\u0131 \u00f6nceden yakalaman\u0131z\u0131 sa\u011flar. Bir kitap\u00e7\u0131n\u0131n a\u00e7\u0131l\u0131\u015f sayfas\u0131nda, kitap verileri (ba\u015fl\u0131k, yazar, fiyat) veya kullan\u0131c\u0131 etkile\u015fimleri (form verileri) gibi yap\u0131land\u0131r\u0131lm\u0131\u015f verilerle \u00e7al\u0131\u015f\u0131rken tip g\u00fcvenli\u011fi, veri tutarl\u0131l\u0131\u011f\u0131n\u0131 ve uygulaman\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/li>\n
Kod Kalitesi ve Okunabilirlik:<\/strong> A\u00e7\u0131k\u00e7a tan\u0131mlanm\u0131\u015f tipler, kodun ne bekledi\u011fini ve ne d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fc netle\u015ftirir. Bu, \u00f6zellikle ekip i\u00e7inde \u00e7al\u0131\u015f\u0131rken veya projeye yeni geli\u015ftiricilerin dahil olmas\u0131 durumunda kodun daha anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar.<\/li>\n
Geli\u015ftirici Verimlili\u011fi:<\/strong> Entegre geli\u015ftirme ortamlar\u0131 (IDE’ler) TypeScript ile m\u00fckemmel bir \u015fekilde entegre olur. Bu, otomatik tamamlama, an\u0131nda hata tespiti, kod gezinme ve yeniden d\u00fczenleme (refactoring) gibi \u00f6zelliklerle geli\u015ftirici verimlili\u011fini art\u0131r\u0131r. Bu sayede, daha h\u0131zl\u0131 ve daha az hatayla kod yazabilirsiniz.<\/li>\n
\u00d6l\u00e7eklenebilirlik:<\/strong> TypeScript, b\u00fcy\u00fck ve karma\u015f\u0131k projelerin y\u00f6netimini kolayla\u015ft\u0131r\u0131r. Kod taban\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, tip sistemi sayesinde kodun farkl\u0131 b\u00f6l\u00fcmleri aras\u0131ndaki etkile\u015fimleri anlamak ve y\u00f6netmek daha kolay hale gelir. Bu, gelecekte a\u00e7\u0131l\u0131\u015f sayfas\u0131n\u0131 bir e-ticaret sitesine veya daha kapsaml\u0131 bir platforma d\u00f6n\u00fc\u015ft\u00fcrmeyi d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczde \u00f6nemli bir avantajd\u0131r.<\/li>\n<\/ul>\n
Proje Yap\u0131land\u0131rmas\u0131 ve Temel Kurulum<\/h3>\n
Gatsby ve TypeScript ile bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131 olu\u015fturmaya ba\u015flamadan \u00f6nce, gerekli ara\u00e7lar\u0131 kurmal\u0131 ve proje yap\u0131s\u0131n\u0131 olu\u015fturmal\u0131y\u0131z.<\/p>\n
\u00d6n Ko\u015fullar<\/h4>\n
Ba\u015flamadan \u00f6nce sisteminizde a\u015fa\u011f\u0131daki yaz\u0131l\u0131mlar\u0131n kurulu oldu\u011fundan emin olun:<\/p>\n
npm veya Yarn:<\/strong> Node.js paket y\u00f6neticisi. Node.js ile birlikte gelir.<\/li>\n
Git:<\/strong> Versiyon kontrol sistemi.<\/li>\n<\/ul>\n
Gatsby CLI Kurulumu<\/h4>\n
Gatsby projelerini h\u0131zl\u0131ca olu\u015fturmak ve y\u00f6netmek i\u00e7in Gatsby Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc’n\u00fc (CLI) global olarak kurman\u0131z gerekir:<\/p>\n
npm install -g gatsby-cli<\/code><\/pre>\n
veya Yarn kullan\u0131yorsan\u0131z:<\/p>\n
yarn global add gatsby-cli<\/code><\/pre>\n
Yeni Gatsby Projesi Olu\u015fturma<\/h4>\n
\u015eimdi, gatsby new<\/code> komutunu kullanarak yeni bir Gatsby projesi olu\u015ftural\u0131m. gatsby-starter-default<\/code> \u015fablonu, TypeScript entegrasyonu i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n
gatsby new bookstore-landing-page https:\/\/github.com\/gatsbyjs\/gatsby-starter-default<\/code><\/pre>\n
Bu komut, bookstore-landing-page<\/code> ad\u0131nda yeni bir dizin olu\u015fturacak ve i\u00e7ine temel Gatsby projesini kuracakt\u0131r. Proje dizinine ge\u00e7i\u015f yap\u0131n:<\/p>\n
cd bookstore-landing-page<\/code><\/pre>\n
TypeScript Entegrasyonu<\/h4>\n
Gatsby v4 ve sonras\u0131 s\u00fcr\u00fcmler, TypeScript’i kutudan \u00e7\u0131kar \u00e7\u0131kmaz (out-of-the-box) destekler, yani ekstra bir gatsby-plugin-typescript<\/code> kurman\u0131za gerek kalmaz. Sadece gerekli TypeScript ve tip tan\u0131mlama paketlerini projenize eklemeniz yeterlidir:<\/p>\n
Ard\u0131ndan, TypeScript derleyicisi i\u00e7in yap\u0131land\u0131rma dosyas\u0131 olan tsconfig.json<\/code>‘\u0131 projenizin k\u00f6k dizininde olu\u015fturman\u0131z gerekir. Bu dosya, TypeScript’in kodunuzu nas\u0131l derlemesi gerekti\u011fini belirtir. A\u015fa\u011f\u0131daki temel yap\u0131land\u0131rma \u00e7o\u011fu proje i\u00e7in yeterli olacakt\u0131r:<\/p>\n
Bu tsconfig.json<\/code> dosyas\u0131, modern JavaScript \u00f6zelliklerini kullanman\u0131za, React JSX’i desteklemenize ve kat\u0131 tip denetimi yapman\u0131za olanak tan\u0131r. include<\/code> alan\u0131, TypeScript’in hangi dosyalar\u0131 derlemesi gerekti\u011fini belirtir.<\/p>\n
Son olarak, Gatsby’nin yap\u0131land\u0131rma dosyalar\u0131n\u0131 da TypeScript ile yazabilirsiniz. gatsby-config.js<\/code> ve gatsby-node.js<\/code> dosyalar\u0131n\u0131 s\u0131ras\u0131yla gatsby-config.ts<\/code> ve gatsby-node.ts<\/code> olarak yeniden adland\u0131r\u0131n. \u0130\u00e7eriklerini uygun TypeScript s\u00f6zdizimine g\u00f6re g\u00fcncelleyin. \u00d6rne\u011fin:<\/p>\n
Art\u0131k projeniz hem Gatsby’nin g\u00fcc\u00fcnden hem de TypeScript’in tip g\u00fcvenli\u011finden yararlanmaya haz\u0131r. npm run develop<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak geli\u015ftirme sunucusunu ba\u015flatabilir ve her \u015feyin do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olabilirsiniz.<\/p>\n
Veri Y\u00f6netimi: GraphQL ve Statik Veriler<\/h3>\n
Bir a\u00e7\u0131l\u0131\u015f sayfas\u0131n\u0131n kalbi, sundu\u011fu i\u00e7eriktir. Kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfam\u0131z i\u00e7in kitap listeleri, kampanyalar, ileti\u015fim bilgileri gibi statik veya yar\u0131-statik verilere ihtiyac\u0131m\u0131z olacak. Gatsby, bu verileri GraphQL arac\u0131l\u0131\u011f\u0131yla \u00e7ekmek i\u00e7in g\u00fc\u00e7l\u00fc bir sistem sunar.<\/p>\n
Landing Page \u0130\u00e7in Veri \u0130htiya\u00e7lar\u0131<\/h4>\n
Tipik bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131 i\u00e7in a\u015fa\u011f\u0131daki veri t\u00fcrlerine ihtiya\u00e7 duyabiliriz:<\/p>\n
\n
Kitap Listesi:<\/strong> Her bir kitap i\u00e7in ba\u015fl\u0131k, yazar, a\u00e7\u0131klama, kapak resmi URL’si, fiyat, kategori vb.<\/li>\n
Kampanyalar\/\u00d6ne \u00c7\u0131kanlar:<\/strong> \u00d6zel indirimler veya yeni \u00e7\u0131kanlar hakk\u0131nda bilgiler.<\/li>\n
Hakk\u0131m\u0131zda\/\u0130leti\u015fim Bilgileri:<\/strong> Kitap\u00e7\u0131n\u0131n adresi, telefon numaras\u0131, e-posta, sosyal medya linkleri.<\/li>\n
Gatsby, uygulaman\u0131z\u0131n veri katman\u0131n\u0131 olu\u015fturmak i\u00e7in GraphQL kullan\u0131r. Bu, farkl\u0131 kaynaklardan gelen verileri tek bir tutarl\u0131 API arac\u0131l\u0131\u011f\u0131yla sorgulaman\u0131za olanak tan\u0131r. Gatsby’nin yerle\u015fik GraphQL aray\u00fcz\u00fc (http:\/\/localhost:8000\/___graphql adresinde bulunur), veri \u015feman\u0131z\u0131 ke\u015ffetmenize ve sorgular\u0131n\u0131z\u0131 test etmenize yard\u0131mc\u0131 olur.<\/p>\n
Veri Kaynaklar\u0131<\/h4>\n
Bir a\u00e7\u0131l\u0131\u015f sayfas\u0131 i\u00e7in genellikle iki ana veri kayna\u011f\u0131 t\u00fcr\u00fc kullan\u0131l\u0131r:<\/p>\n
\n
Yerel Markdown\/JSON Dosyalar\u0131:<\/strong> Daha k\u00fc\u00e7\u00fck, statik veya nadiren de\u011fi\u015fen i\u00e7erikler i\u00e7in idealdir. Kitap listeleri, sabit metinler ve ileti\u015fim bilgileri gibi veriler i\u00e7in JSON dosyalar\u0131 veya Markdown dosyalar\u0131 kullan\u0131labilir. Bu y\u00f6ntem, harici bir veritaban\u0131 veya CMS’ye ihtiya\u00e7 duymadan h\u0131zl\u0131ca i\u00e7erik eklemenizi sa\u011flar.<\/li>\n
CMS (Content Management System):<\/strong> \u0130\u00e7eri\u011fin s\u0131k s\u0131k g\u00fcncellenmesi veya daha karma\u015f\u0131k bir yap\u0131ya sahip olmas\u0131 durumunda Contentful, Sanity, Strapi gibi ba\u015fs\u0131z (headless) CMS’ler tercih edilebilir. Gatsby, bu CMS’ler i\u00e7in zengin eklenti deste\u011fi sunar. Bu makalede, basitlik ad\u0131na yerel JSON dosyalar\u0131n\u0131 kullanmaya odaklanaca\u011f\u0131z, ancak CMS entegrasyonunun nas\u0131l yap\u0131labilece\u011fine dair k\u0131sa bir bilgi verece\u011fiz.<\/li>\n<\/ol>\n
\u00d6rnek Veri Yap\u0131s\u0131 (JSON)<\/h4>\n
src\/data<\/code> ad\u0131nda yeni bir dizin olu\u015ftural\u0131m ve i\u00e7ine books.json<\/code> ad\u0131nda bir dosya ekleyelim. Bu dosya, kitaplar\u0131m\u0131z\u0131n verilerini i\u00e7erecek:<\/p>\n
\/\/ src\/data\/books.json\n[\n {\n \"id\": \"1\",\n \"title\": \"Bilinmeyen Bir Kad\u0131n\u0131n Mektubu\",\n \"author\": \"Stefan Zweig\",\n \"description\": \"Tutkulu bir a\u015fk\u0131n, tek tarafl\u0131 bir tutkunun derinliklerini ke\u015ffedin.\",\n \"image\": \"\/images\/book1.jpg\",\n \"price\": \"25.00 TL\",\n \"category\": \"Roman\"\n },\n {\n \"id\": \"2\",\n \"title\": \"Hayvan \u00c7iftli\u011fi\",\n \"author\": \"George Orwell\",\n \"description\": \"Hayvanlar\u0131n isyan\u0131n\u0131 ve iktidar\u0131n yozla\u015fmas\u0131n\u0131 anlatan alegorik bir ba\u015fyap\u0131t.\",\n \"image\": \"\/images\/book2.jpg\",\n \"price\": \"30.00 TL\",\n \"category\": \"Distopya\"\n },\n {\n \"id\": \"3\",\n \"title\": \"K\u00fc\u00e7\u00fck Prens\",\n \"author\": \"Antoine de Saint-Exup\u00e9ry\",\n \"description\": \"Yeti\u015fkinlere \u00e7ocuklu\u011fun ve insanl\u0131\u011f\u0131n anlam\u0131n\u0131 hat\u0131rlatan evrensel bir hikaye.\",\n \"image\": \"\/images\/book3.jpg\",\n \"price\": \"20.00 TL\",\n \"category\": \"Masal\"\n }\n]\n<\/code><\/pre>\n
Bu \u00f6rnekte, image<\/code> alan\u0131 \u015fimdilik sadece bir yol belirtiyor. Gatsby Image eklentisi ile bu resimleri optimize edece\u011fiz.<\/p>\n
gatsby-config.ts<\/code>‘de Veri Kaynaklar\u0131n\u0131 Yap\u0131land\u0131rma<\/h4>\n
Gatsby’nin bu JSON dosyas\u0131n\u0131 okuyabilmesi i\u00e7in gatsby-source-filesystem<\/code> ve gatsby-transformer-json<\/code> eklentilerini gatsby-config.ts<\/code> dosyan\u0131za eklemeniz gerekir:<\/p>\n
src\/images<\/code> dizinini olu\u015fturmay\u0131 ve \u00f6rnek kitap resimlerini i\u00e7ine yerle\u015ftirmeyi unutmay\u0131n.<\/p>\n
GraphQL Sorgular\u0131<\/h4>\n
Verileri React bile\u015fenlerinizde kullanmak i\u00e7in GraphQL sorgular\u0131 yazman\u0131z gerekir. Gatsby’de iki ana sorgu t\u00fcr\u00fc vard\u0131r:<\/p>\n
useStaticQuery<\/code> Hook’u:<\/strong> Herhangi bir bile\u015fende (sayfa olmayan bile\u015fenler dahil) kullan\u0131labilen bir React Hook’udur. K\u00fc\u00e7\u00fck ve statik verileri \u00e7ekmek i\u00e7in idealdir.<\/li>\n<\/ol>\n
Kitap listemizi \u00e7ekmek i\u00e7in useStaticQuery<\/code> kullanaca\u011f\u0131z. \u00d6rnek bir sorgu \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n
Yukar\u0131daki sorguda, image<\/code> alan\u0131 i\u00e7in gatsbyImageData<\/code>‘y\u0131 kullanabilmek i\u00e7in gatsby-plugin-image<\/code>, gatsby-plugin-sharp<\/code> ve gatsby-transformer-sharp<\/code> eklentilerinin d\u00fczg\u00fcn yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131ndan emin olun. books.json<\/code> dosyas\u0131ndaki image<\/code> alan\u0131n\u0131 \/images\/book1.jpg<\/code> gibi bir yolla g\u00fcncellemeniz ve src\/images<\/code> dizininde ilgili resim dosyalar\u0131n\u0131n bulunmas\u0131 gerekir. Gatsby, bu yollar\u0131 otomatik olarak i\u015fleyerek optimize edilmi\u015f resimler olu\u015fturacakt\u0131r.<\/p>\n
Bile\u015fen Olu\u015fturma (React ve TypeScript)<\/h3>\n
Gatsby, React \u00fczerine kuruludur, bu da UI’n\u0131z\u0131 yeniden kullan\u0131labilir bile\u015fenlerle olu\u015fturabilece\u011finiz anlam\u0131na gelir. TypeScript ile bu bile\u015fenleri daha g\u00fcvenli ve bak\u0131m\u0131 kolay hale getirebiliriz.<\/p>\n
Temel Bile\u015fenler<\/h4>\n
Bir kitap\u00e7\u0131 a\u00e7\u0131l\u0131\u015f sayfas\u0131 i\u00e7in a\u015fa\u011f\u0131daki temel bile\u015fenlere ihtiyac\u0131m\u0131z olacak:<\/p>\n
\n
Layout.tsx<\/code> (src\/components\/Layout.tsx):<\/strong> Sayfan\u0131n genel yap\u0131s\u0131n\u0131 (ba\u015fl\u0131k, alt bilgi, SEO meta etiketleri) tan\u0131mlayan kapsay\u0131c\u0131 bile\u015fen.<\/li>\n
HeroSection.tsx<\/code> (src\/components\/HeroSection.tsx):<\/strong> Sayfan\u0131n en \u00fcst\u00fcnde yer alan, dikkat \u00e7ekici bir ba\u015fl\u0131k, slogan ve \u00e7a\u011fr\u0131-eylem butonu i\u00e7eren b\u00f6l\u00fcm.<\/li>\n
BookCard.tsx<\/code> (src\/components\/BookCard.tsx):<\/strong> Tek bir kitab\u0131n bilgilerini (resim, ba\u015fl\u0131k, yazar, fiyat) g\u00f6r\u00fcnt\u00fcleyen kart bile\u015feni.<\/li>\n
BookList.tsx<\/code> (src\/components\/BookList.tsx):<\/strong> BookCard<\/code> bile\u015fenlerini bir liste veya grid d\u00fczeninde sergileyen kapsay\u0131c\u0131 bile\u015fen.<\/li>\n
CallToAction.tsx<\/code> (src\/components\/CallToAction.tsx):<\/strong> Kullan\u0131c\u0131lar\u0131 belirli bir eyleme (\u00f6rne\u011fin, b\u00fcltene abone olma) te\u015fvik eden bir b\u00f6l\u00fcm.<\/li>\n
Footer.tsx<\/code> (src\/components\/Footer.tsx):<\/strong> \u0130leti\u015fim bilgileri, sosyal medya linkleri ve telif hakk\u0131 bildirimini i\u00e7eren sayfa alt bilgisi.<\/li>\n<\/ul>\n
TypeScript ile Prop Tan\u0131mlamalar\u0131<\/h4>\n
Her React bile\u015feninde, props’lar\u0131n tiplerini interface<\/code> veya type<\/code> anahtar kelimeleriyle tan\u0131mlayarak tip g\u00fcvenli\u011fini sa\u011flayabiliriz.<\/p>\n