Gatsby ve TypeScript ile Kitapçı Açılış Sayfası (Landing Page) Nasıl Oluşturulur?

Giriş

Dijital çağda, her işletmenin çevrimiçi bir varlığa sahip olması hayati önem taşımaktadır. Kitapçılar da bu kuralın bir istisnası değildir. Yeni bir kitapçının lansmanı, özel bir kampanya duyurusu veya yazar etkinliği gibi durumlar için etkili bir açılış sayfası (landing page), potansiyel müşterilere ulaşmanın ve onları etkileşime teşvik etmenin en güçlü yollarından biridir. Bu makalede, modern web geliştirme dünyasının önde gelen teknolojilerinden Gatsby ve TypeScript kullanarak, yüksek performanslı, SEO dostu ve bakımı kolay bir kitapçı açılış sayfası oluşturmanın adımlarını detaylı bir şekilde inceleyeceğiz.

Gatsby, React tabanlı statik site oluşturucu (Static Site Generator – SSG) olarak, hız, güvenlik ve ölçeklenebilirlik gibi avantajlar sunarken, TypeScript ise JavaScript’e tip güvenliği ekleyerek daha sağlam, okunabilir ve sürdürülebilir kod yazmamızı sağlar. Bu kombinasyon, özellikle büyük ekiplerle çalışırken veya uzun vadeli projelerde hata oranını azaltmada ve geliştirici deneyimini iyileştirmede önemli faydalar sunar. Bir kitapçı açılış sayfası, genellikle yeni çıkan kitapları, öne çıkan yazarları, özel indirimleri veya etkinlikleri sergileyen, tek odaklı bir pazarlama aracıdır. Bu tür bir sayfa, kullanıcıları belirli bir eyleme (örneğin, bültene abone olma, yeni kitaplara göz atma veya bir etkinliğe kaydolma) yönlendirmek için tasarlanmıştır. Bu rehberde, bu hedeflere ulaşmak için gerekli tüm teknik adımları ele alacağız.

Gatsby ve TypeScript Neden Tercih Edilmeli?

Bir kitapçı açılış sayfası gibi pazarlama odaklı bir proje için Gatsby ve TypeScript seçimi, birçok stratejik avantajı beraberinde getirir. Bu bölümde, bu teknolojilerin sunduğu temel faydaları detaylandıracağız.

Gatsby’nin Avantajları

Gatsby, modern web siteleri oluşturmak için güçlü bir araçtır ve özellikle açılış sayfaları için idealdir:

Üstün Performans: Gatsby, önceden oluşturulmuş (pre-built) statik HTML dosyaları sunarak sayfa yükleme sürelerini minimuma indirir. Bu, kullanıcı deneyimini iyileştirir ve arama motoru sıralamalarını olumlu etkiler. Resim optimizasyonu, kod bölme (code splitting) ve lazy loading gibi yerleşik optimizasyonlar sayesinde siteler, Lighthouse gibi performans testlerinde yüksek puanlar alır. Bir kitapçı açılış sayfasında görsellerin (kitap kapakları vb.) yoğun kullanıldığı düşünüldüğünde, bu özellik kritik öneme sahiptir.
Gelişmiş SEO: Statik HTML, arama motorlarının sitenizi daha kolay ve verimli bir şekilde taramasına olanak tanır. Hızlı yükleme süreleri ve optimize edilmiş içerik yapısı, anahtar kelime sıralamalarında avantaj sağlar. Gatsby’nin meta etiket yönetimi için sunduğu eklentilerle, her sayfa için özelleştirilmiş SEO başlıkları, açıklamaları ve sosyal medya paylaşımları (Open Graph) kolayca yapılandırılabilir.
Geliştirici Deneyimi: React ekosistemine dayanması sayesinde, React geliştiricileri Gatsby ile hızlıca adapte olabilir. GraphQL tabanlı veri katmanı, farklı kaynaklardan (yerel dosyalar, CMS’ler, API’ler) verileri tek bir yerden çekmeyi ve yönetmeyi son derece kolaylaştırır. Zengin eklenti ekosistemi, çeşitli işlevsellikleri (resim işleme, veri kaynakları, stil yönetimi) projeye entegre etmeyi basitleştirir.
Güvenlik: Statik siteler, sunucu tarafında herhangi bir dinamik işlem veya veritabanı bağlantısı gerektirmediği için geleneksel dinamik sitelere göre çok daha güvenlidir. Bu, potansiyel güvenlik açıklarını büyük ölçüde azaltır.
Maliyet Etkinliği: Statik siteler, genellikle CDN’ler (Content Delivery Network) veya uygun maliyetli statik hosting servisleri (Netlify, Vercel, GitHub Pages) üzerinden dağıtılabilir. Bu, sunucu maliyetlerini önemli ölçüde düşürür.

TypeScript’in Avantajları

TypeScript, JavaScript’in süper kümesi olarak, özellikle büyük ve karmaşık projelerde geliştirme sürecine değer katan bir dizi avantaj sunar:

Tip Güvenliği: TypeScript’in en büyük avantajı, kodunuzu derleme zamanında tip hatalarına karşı kontrol etmesidir. Bu, çalışma zamanında ortaya çıkabilecek birçok hatayı önceden yakalamanızı sağlar. Bir kitapçının açılış sayfasında, kitap verileri (başlık, yazar, fiyat) veya kullanıcı etkileşimleri (form verileri) gibi yapılandırılmış verilerle çalışırken tip güvenliği, veri tutarlılığını ve uygulamanın kararlılığını artırır.
Kod Kalitesi ve Okunabilirlik: Açıkça tanımlanmış tipler, kodun ne beklediğini ve ne döndürdüğünü netleştirir. Bu, özellikle ekip içinde çalışırken veya projeye yeni geliştiricilerin dahil olması durumunda kodun daha anlaşılır ve bakımı kolay olmasını sağlar.
Geliştirici Verimliliği: Entegre geliştirme ortamları (IDE’ler) TypeScript ile mükemmel bir şekilde entegre olur. Bu, otomatik tamamlama, anında hata tespiti, kod gezinme ve yeniden düzenleme (refactoring) gibi özelliklerle geliştirici verimliliğini artırır. Bu sayede, daha hızlı ve daha az hatayla kod yazabilirsiniz.
Ölçeklenebilirlik: TypeScript, büyük ve karmaşık projelerin yönetimini kolaylaştırır. Kod tabanı büyüdükçe, tip sistemi sayesinde kodun farklı bölümleri arasındaki etkileşimleri anlamak ve yönetmek daha kolay hale gelir. Bu, gelecekte açılış sayfasını bir e-ticaret sitesine veya daha kapsamlı bir platforma dönüştürmeyi düşündüğünüzde önemli bir avantajdır.

Proje Yapılandırması ve Temel Kurulum

Gatsby ve TypeScript ile bir kitapçı açılış sayfası oluşturmaya başlamadan önce, gerekli araçları kurmalı ve proje yapısını oluşturmalıyız.

Ön Koşullar

Başlamadan önce sisteminizde aşağıdaki yazılımların kurulu olduğundan emin olun:

Node.js: JavaScript çalışma zamanı ortamı. LTS (Uzun Süreli Destek) sürümünü kullanmanız önerilir.
npm veya Yarn: Node.js paket yöneticisi. Node.js ile birlikte gelir.
Git: Versiyon kontrol sistemi.

Gatsby CLI Kurulumu

Gatsby projelerini hızlıca oluşturmak ve yönetmek için Gatsby Komut Satırı Arayüzü’nü (CLI) global olarak kurmanız gerekir:

npm install -g gatsby-cli

veya Yarn kullanıyorsanız:

yarn global add gatsby-cli

Yeni Gatsby Projesi Oluşturma

Şimdi, gatsby new komutunu kullanarak yeni bir Gatsby projesi oluşturalım. gatsby-starter-default şablonu, TypeScript entegrasyonu için iyi bir başlangıç noktasıdır.

gatsby new bookstore-landing-page https://github.com/gatsbyjs/gatsby-starter-default

Bu komut, bookstore-landing-page adında yeni bir dizin oluşturacak ve içine temel Gatsby projesini kuracaktır. Proje dizinine geçiş yapın:

cd bookstore-landing-page

TypeScript Entegrasyonu

Gatsby v4 ve sonrası sürümler, TypeScript’i kutudan çıkar çıkmaz (out-of-the-box) destekler, yani ekstra bir gatsby-plugin-typescript kurmanıza gerek kalmaz. Sadece gerekli TypeScript ve tip tanımlama paketlerini projenize eklemeniz yeterlidir:

npm install --save-dev typescript @types/react @types/react-dom @types/node

veya Yarn ile:

yarn add --dev typescript @types/react @types/react-dom @types/node

Ardından, TypeScript derleyicisi için yapılandırma dosyası olan tsconfig.json‘ı projenizin kök dizininde oluşturmanız gerekir. Bu dosya, TypeScript’in kodunuzu nasıl derlemesi gerektiğini belirtir. Aşağıdaki temel yapılandırma çoğu proje için yeterli olacaktır:

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "src"
  },
  "include": ["./src//*", "./gatsby-node.ts", "./gatsby-config.ts"]
}

Bu tsconfig.json dosyası, modern JavaScript özelliklerini kullanmanıza, React JSX’i desteklemenize ve katı tip denetimi yapmanıza olanak tanır. include alanı, TypeScript’in hangi dosyaları derlemesi gerektiğini belirtir.

Son olarak, Gatsby’nin yapılandırma dosyalarını da TypeScript ile yazabilirsiniz. gatsby-config.js ve gatsby-node.js dosyalarını sırasıyla gatsby-config.ts ve gatsby-node.ts olarak yeniden adlandırın. İçeriklerini uygun TypeScript sözdizimine göre güncelleyin. Örneğin:

// gatsby-config.ts
import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  siteMetadata: {
    title: Kitapçı Açılış Sayfası,
    description: Yeni çıkan kitapları ve özel kampanyaları keşfedin.,
    author: @gatsbyjs,
    siteUrl: https://www.yourbookstore.com,
  },
  plugins: [
    gatsby-plugin-image,
    gatsby-plugin-sharp,
    gatsby-transformer-sharp,
    {
      resolve: gatsby-source-filesystem,
      options: {
        name: images,
        path: ${__dirname}/src/images,
      },
    },
    // Diğer eklentiler buraya eklenecek
  ],
};

export default config;

Artık projeniz hem Gatsby’nin gücünden hem de TypeScript’in tip güvenliğinden yararlanmaya hazır. npm run develop komutunu çalıştırarak geliştirme sunucusunu başlatabilir ve her şeyin doğru çalıştığından emin olabilirsiniz.

Veri Yönetimi: GraphQL ve Statik Veriler

Bir açılış sayfasının kalbi, sunduğu içeriktir. Kitapçı açılış sayfamız için kitap listeleri, kampanyalar, iletişim bilgileri gibi statik veya yarı-statik verilere ihtiyacımız olacak. Gatsby, bu verileri GraphQL aracılığıyla çekmek için güçlü bir sistem sunar.

Landing Page İçin Veri İhtiyaçları

Tipik bir kitapçı açılış sayfası için aşağıdaki veri türlerine ihtiyaç duyabiliriz:

Kitap Listesi: Her bir kitap için başlık, yazar, açıklama, kapak resmi URL’si, fiyat, kategori vb.
Kampanyalar/Öne Çıkanlar: Özel indirimler veya yeni çıkanlar hakkında bilgiler.
Hakkımızda/İletişim Bilgileri: Kitapçının adresi, telefon numarası, e-posta, sosyal medya linkleri.
Hero Bölümü İçeriği: Büyük başlık, slogan, çağrı-eylem (Call-to-Action) butonu metni ve linki.

GraphQL’e Giriş

Gatsby, uygulamanızın veri katmanını oluşturmak için GraphQL kullanır. Bu, farklı kaynaklardan gelen verileri tek bir tutarlı API aracılığıyla sorgulamanıza olanak tanır. Gatsby’nin yerleşik GraphQL arayüzü (http://localhost:8000/___graphql adresinde bulunur), veri şemanızı keşfetmenize ve sorgularınızı test etmenize yardımcı olur.

Veri Kaynakları

Bir açılış sayfası için genellikle iki ana veri kaynağı türü kullanılır:

Yerel Markdown/JSON Dosyaları: Daha küçük, statik veya nadiren değişen içerikler için idealdir. Kitap listeleri, sabit metinler ve iletişim bilgileri gibi veriler için JSON dosyaları veya Markdown dosyaları kullanılabilir. Bu yöntem, harici bir veritabanı veya CMS’ye ihtiyaç duymadan hızlıca içerik eklemenizi sağlar.
CMS (Content Management System): İçeriğin sık sık güncellenmesi veya daha karmaşık bir yapıya sahip olması durumunda Contentful, Sanity, Strapi gibi başsız (headless) CMS’ler tercih edilebilir. Gatsby, bu CMS’ler için zengin eklenti desteği sunar. Bu makalede, basitlik adına yerel JSON dosyalarını kullanmaya odaklanacağız, ancak CMS entegrasyonunun nasıl yapılabileceğine dair kısa bir bilgi vereceğiz.

Örnek Veri Yapısı (JSON)

src/data adında yeni bir dizin oluşturalım ve içine books.json adında bir dosya ekleyelim. Bu dosya, kitaplarımızın verilerini içerecek:

// src/data/books.json
[
  {
    "id": "1",
    "title": "Bilinmeyen Bir Kadının Mektubu",
    "author": "Stefan Zweig",
    "description": "Tutkulu bir aşkın, tek taraflı bir tutkunun derinliklerini keşfedin.",
    "image": "/images/book1.jpg",
    "price": "25.00 TL",
    "category": "Roman"
  },
  {
    "id": "2",
    "title": "Hayvan Çiftliği",
    "author": "George Orwell",
    "description": "Hayvanların isyanını ve iktidarın yozlaşmasını anlatan alegorik bir başyapıt.",
    "image": "/images/book2.jpg",
    "price": "30.00 TL",
    "category": "Distopya"
  },
  {
    "id": "3",
    "title": "Küçük Prens",
    "author": "Antoine de Saint-Exupéry",
    "description": "Yetişkinlere çocukluğun ve insanlığın anlamını hatırlatan evrensel bir hikaye.",
    "image": "/images/book3.jpg",
    "price": "20.00 TL",
    "category": "Masal"
  }
]

Bu örnekte, image alanı şimdilik sadece bir yol belirtiyor. Gatsby Image eklentisi ile bu resimleri optimize edeceğiz.

`gatsby-config.ts`‘de Veri Kaynaklarını Yapılandırma

Gatsby’nin bu JSON dosyasını okuyabilmesi için gatsby-source-filesystem ve gatsby-transformer-json eklentilerini gatsby-config.ts dosyanıza eklemeniz gerekir:

// gatsby-config.ts içindeki plugins dizisine ekleyin
plugins: [
  // ... diğer eklentiler
  {
    resolve: gatsby-source-filesystem,
    options: {
      name: data,
      path: ${__dirname}/src/data/, // JSON dosyalarının bulunduğu dizin
    },
  },
  gatsby-transformer-json, // JSON dosyalarını GraphQL şemasına dönüştürür
  {
    resolve: gatsby-source-filesystem,
    options: {
      name: images,
      path: ${__dirname}/src/images, // Resim dosyalarının bulunduğu dizin
    },
  },
  gatsby-plugin-image,
  gatsby-plugin-sharp,
  gatsby-transformer-sharp,
],

src/images dizinini oluşturmayı ve örnek kitap resimlerini içine yerleştirmeyi unutmayın.

GraphQL Sorguları

Verileri React bileşenlerinizde kullanmak için GraphQL sorguları yazmanız gerekir. Gatsby’de iki ana sorgu türü vardır:

Sayfa Sorguları (Page Queries): Yalnızca sayfa bileşenlerinde (örneğin src/pages/index.tsx) kullanılabilen sorgulardır. Veriler, sayfa bileşenine props olarak iletilir.
useStaticQuery Hook’u: Herhangi bir bileşende (sayfa olmayan bileşenler dahil) kullanılabilen bir React Hook’udur. Küçük ve statik verileri çekmek için idealdir.

Kitap listemizi çekmek için useStaticQuery kullanacağız. Örnek bir sorgu şöyle görünecektir:

query {
  allBooksJson {
    nodes {
      id
      title
      author
      description
      image { // Gatsby Image ile optimize edilmiş resimler için
        childImageSharp {
          gatsbyImageData(width: 300, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
        }
      }
      price
      category
    }
  }
}

Yukarıdaki sorguda, image alanı için gatsbyImageData‘yı kullanabilmek için gatsby-plugin-image, gatsby-plugin-sharp ve gatsby-transformer-sharp eklentilerinin düzgün yapılandırıldığından emin olun. books.json dosyasındaki image alanını /images/book1.jpg gibi bir yolla güncellemeniz ve src/images dizininde ilgili resim dosyalarının bulunması gerekir. Gatsby, bu yolları otomatik olarak işleyerek optimize edilmiş resimler oluşturacaktır.

Bileşen Oluşturma (React ve TypeScript)

Gatsby, React üzerine kuruludur, bu da UI’nızı yeniden kullanılabilir bileşenlerle oluşturabileceğiniz anlamına gelir. TypeScript ile bu bileşenleri daha güvenli ve bakımı kolay hale getirebiliriz.

Temel Bileşenler

Bir kitapçı açılış sayfası için aşağıdaki temel bileşenlere ihtiyacımız olacak:

Layout.tsx (src/components/Layout.tsx): Sayfanın genel yapısını (başlık, alt bilgi, SEO meta etiketleri) tanımlayan kapsayıcı bileşen.
Header.tsx (src/components/Header.tsx): Logo, kitapçı adı ve navigasyon linklerini içeren sayfa başlığı.
HeroSection.tsx (src/components/HeroSection.tsx): Sayfanın en üstünde yer alan, dikkat çekici bir başlık, slogan ve çağrı-eylem butonu içeren bölüm.
BookCard.tsx (src/components/BookCard.tsx): Tek bir kitabın bilgilerini (resim, başlık, yazar, fiyat) görüntüleyen kart bileşeni.
BookList.tsx (src/components/BookList.tsx): BookCard bileşenlerini bir liste veya grid düzeninde sergileyen kapsayıcı bileşen.
CallToAction.tsx (src/components/CallToAction.tsx): Kullanıcıları belirli bir eyleme (örneğin, bültene abone olma) teşvik eden bir bölüm.
Footer.tsx (src/components/Footer.tsx): İletişim bilgileri, sosyal medya linkleri ve telif hakkı bildirimini içeren sayfa alt bilgisi.

TypeScript ile Prop Tanımlamaları

Her React bileşeninde, props’ların tiplerini interface veya type anahtar kelimeleriyle tanımlayarak tip güvenliğini sağlayabiliriz.

Örnek BookCard.tsx bileşeni:

// src/components/BookCard.tsx
import React from "react";
import { GatsbyImage, getImage, ImageDataLike } from "gatsby-plugin-image";

interface BookCardProps {
  id: string;
  title: string;
  author: string;
  description: string;
  imageData: ImageDataLike; // Gatsby Image için tip
  price: string;
  category: string;
}

const BookCard: React.FC = ({ title, author, imageData, price }) => {
  const image = getImage(imageData);

  if (!image) {
    return null; // Resim yoksa kartı gösterme
  }

  return (
    
      
      
        {title}
        Yazar: {author}
        {price}
        
      
    
  );
};

export default BookCard;

Bu örnekte, imageData prop’u için ImageDataLike tipini kullanarak Gatsby Image’ın beklediği veri yapısını belirtiyoruz.

Styling Seçenekleri

Gatsby ile stil eklemek için birçok farklı yöntem kullanabilirsiniz:

CSS Modules: Bileşenlere özgü stiller oluşturmak için harika bir yoldur. Çakışmaları önler.
Styled Components / Emotion: CSS-in-JS kütüphaneleri, stilleri doğrudan React bileşenlerinizin içine yazmanıza olanak tanır.
Tailwind CSS: Utility-first bir CSS framework’üdür. Hızlı prototipleme ve tutarlı bir tasarım sistemi oluşturmak için çok etkilidir. Bu makaledeki örneklerde Tailwind CSS kullanılmıştır. Kurulum için npm install -D tailwindcss postcss autoprefixer ve tailwind.config.js, postcss.config.js dosyalarını yapılandırmanız gerekir.
Sass/Less: CSS preprocessor’lar, daha gelişmiş stil yönetimi sağlar.

Gatsby Image Optimizasyonu

Gatsby, görselleri otomatik olarak optimize etmek için gatsby-plugin-image eklentisini sunar. Bu eklenti, farklı ekran boyutları için duyarlı görseller oluşturur, lazy loading uygular ve WebP/AVIF gibi modern formatları destekler.
Kullanımı için gatsby-config.ts‘ye gatsby-plugin-image, gatsby-plugin-sharp ve gatsby-transformer-sharp eklediğinizden emin olun. Ardından, GatsbyImage bileşenini kullanabilirsiniz.
Yukarıdaki BookCard örneğinde, getImage ve GatsbyImage bileşenlerinin nasıl kullanıldığı gösterilmiştir.

Sayfa Oluşturma (`index.tsx`)

Açılış sayfamızın ana içeriği src/pages/index.tsx dosyasında yer alacak. Bu dosya, oluşturduğumuz tüm bileşenleri bir araya getirerek tam bir sayfa oluşturacak.

// src/pages/index.tsx
import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import { ImageDataLike } from "gatsby-plugin-image";
import Layout from "../components/Layout";
import HeroSection from "../components/HeroSection";
import BookList from "../components/BookList";
import CallToAction from "../components/CallToAction";
import Header from "../components/Header";
import Footer from "../components/Footer";

// Kitap verileri için TypeScript arayüzü
interface BookNode {
  id: string;
  title: string;
  author: string;
  description: string;
  image: {
    childImageSharp: {
      gatsbyImageData: ImageDataLike;
    };
  };
  price: string;
  category: string;
}

// GraphQL sorgusundan dönen veri yapısı için arayüz
interface QueryData {
  allBooksJson: {
    nodes: BookNode[];
  };
  site: {
    siteMetadata: {
      title: string;
      description: string;
    };
  };
}

const IndexPage: React.FC = () => {
  // useStaticQuery ile GraphQL sorgusunu çalıştır
  const data = useStaticQuery(graphql
    query IndexPageQuery {
      allBooksJson {
        nodes {
          id
          title
          author
          description
          price
          category
          image {
            childImageSharp {
              gatsbyImageData(width: 300, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
            }
          }
        }
      }
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  );

  const books = data.allBooksJson.nodes;
  const siteTitle = data.site.siteMetadata.title;
  const siteDescription = data.site.siteMetadata.description;

  return (
    
      
      
      
        Öne Çıkan Kitaplar
        {books.length > 0 ? (
          
        ) : (
          Şu anda gösterilecek kitap bulunmamaktadır.
        )}
      
      
      
    
  );
};

export default IndexPage;

Yukarıdaki kodda, useStaticQuery ile allBooksJson verilerini çekiyor ve BookList bileşenine iletiyoruz. HeroSection ve CallToAction gibi diğer bileşenler de kendi prop’ları ile dolduruluyor. Layout, Header ve Footer bileşenleri ise sayfanın genel yapısını sağlıyor.

SEO ve Performans Optimizasyonları

Bir açılış sayfasının başarısı büyük ölçüde arama motoru optimizasyonu (SEO) ve performansına bağlıdır. Gatsby, bu alanlarda doğal avantajlar sunarken, bazı ek adımlar daha iyi sonuçlar almanızı sağlar.

SEO Optimizasyonları

Meta Etiketler: Gatsby’de gatsby-plugin-react-helmet (veya Gatsby v4+ için yerleşik Head API’si) kullanarak her sayfa için dinamik olarak title, description, keywords gibi meta etiketleri ayarlayabilirsiniz. Bu, arama motorlarının sayfanızın içeriğini anlamasına yardımcı olur.

// src/components/Layout.tsx içinde Head bileşeni kullanımı
import React from "react";
import { HeadProps, HeadFC } from "gatsby"; // HeadFC'yi import et

interface LayoutProps {
  children: React.ReactNode;
  siteTitle?: string;
  siteDescription?: string;
}

const Layout: React.FC = ({ children }) => {
  return (
    <>
      {children}
    
  );
};

export default Layout;

export const Head: HeadFC = ({ data, location }) => {
  const { siteTitle, siteDescription } = data; // Bu kısım useStaticQuery ile çekilmeli veya props olarak gelmeli
  // Daha gerçekçi bir senaryo için, siteMetadata'yı doğrudan useStaticQuery ile çekelim:
  const siteData = useStaticQuery(graphql
    query {
      site {
        siteMetadata {
          title
          description
          siteUrl
        }
      }
    }
  );
  const { title, description, siteUrl } = siteData.site.siteMetadata;

  return (
    <>
      {title}
      
      
      
      
      
      {/ Diğer meta etiketleri, örneğin og:image, twitter kartları /}
    
  );
};

Anlamlı URL’ler: Gatsby’nin dosya tabanlı yönlendirme sistemi, kolayca anlamlı URL’ler oluşturmanıza olanak tanır (örneğin, /kitaplar, /hakkimizda).
Schema Markup (JSON-LD): Sayfanızın içeriğini arama motorlarına daha iyi anlatmak için Schema.org işaretlemesi (örneğin Book, Product, Organization şemaları) kullanın. Bu, zengin sonuçlar (rich snippets) elde etmenize yardımcı olabilir.

Performans Optimizasyonları

Gatsby, varsayılan olarak birçok performans optimizasyonu uygular, ancak bazı ek adımlar daha da ileri gitmenizi sağlar:

Gatsby Image: Daha önce bahsedildiği gibi, gatsby-plugin-image görsellerinizi otomatik olarak optimize eder. Bu, sayfa yükleme hızını önemli ölçüde artırır.
Code Splitting ve Lazy Loading: Gatsby, her sayfa ve bileşen için kodu otomatik olarak böler ve yalnızca ihtiyaç duyulduğunda yükler. Bu, başlangıç yükleme boyutunu azaltır.
Prefetching: Gatsby, kullanıcının tıklayabileceği bağlantıların kaynaklarını önceden getirerek sayfa geçişlerini anında hissettirir.
Kritik CSS: Gatsby, her sayfa için yalnızca o sayfanın görünümü için gerekli olan CSS’i çıkarır ve inline olarak ekler. Bu, ilk boyama süresini (First Contentful Paint) iyileştirir.
Font Optimizasyonu: Web fontları kullanıyorsanız, gatsby-plugin-webfonts gibi eklentilerle fontların yüklenmesini optimize edebilir, FOUT (Flash of Unstyled Text) veya FOIT (Flash of Invisible Text) sorunlarını önleyebilirsiniz.

Dağıtım (Deployment)

Geliştirme sürecini tamamladıktan sonra, açılış sayfanızı yayınlamanın zamanı gelir. Gatsby statik bir site oluşturucu olduğu için dağıtımı oldukça basittir.

Üretim Derlemesi

Öncelikle, projenizin üretim için optimize edilmiş statik dosyalarını oluşturmanız gerekir:

gatsby build

Bu komut, projenizin kök dizininde public adında bir dizin oluşturur. Bu dizin, tüm optimize edilmiş HTML, CSS, JavaScript ve resim dosyalarını içerir. Bu public dizini, web sunucunuza yüklemeniz gereken tek şeydir.

Statik Site Hosting Servisleri

Gatsby sitelerini barındırmak için birçok harika ve genellikle ücretsiz seçenek bulunur:

Netlify: Otomatik dağıtım, sürekli entegrasyon/sürekli teslimat (CI/CD), global CDN, HTTPS ve form işleme gibi özellikler sunar. GitHub, GitLab veya Bitbucket deponuzu bağlayarak her commit’te otomatik olarak sitenizi dağıtabilirsiniz.
Vercel: Netlify’a benzer özellikler sunan, geliştiriciler için optimize edilmiş bir platformdur. React, Next.js ve Gatsby gibi framework’ler için özel destek sağlar.
GitHub Pages: GitHub deponuzdan doğrudan statik siteleri barındırmak için basit bir yoldur. Genellikle daha basit projeler için tercih edilir.
AWS S3 + CloudFront: Daha fazla kontrol ve ölçeklenebilirlik isteyenler için Amazon S3’te statik dosyaları barındırıp CloudFront CDN ile dağıtmak güçlü bir çözümdür.
Firebase Hosting: Google’ın sunduğu hızlı ve güvenilir bir hosting çözümüdür.

Netlify veya Vercel ile Dağıtım (Önerilen):
1. Deponuzu Oluşturun: Projenizi bir Git deposuna (GitHub, GitLab, Bitbucket) yükleyin.
2. Hesap Oluşturun: Netlify veya Vercel’de bir hesap oluşturun ve Git deponuzla bağlayın.
3. Yeni Site Oluşturun: “Yeni site oluştur” seçeneğini seçin ve deponuzu bağlayın.
4. Yapılandırma Ayarları:
* Build Command: gatsby build
* Publish Directory: public/
5. Dağıtımı Başlatın: Ayarları onayladığınızda, Netlify/Vercel deponuzu klonlayacak, gatsby build komutunu çalıştıracak ve public dizinindeki içeriği canlıya alacaktır. Bundan sonra, deponuza her yeni commit gönderdiğinizde siteniz otomatik olarak yeniden dağıtılacaktır.

Bu platformlar, SSL sertifikaları, özel alan adları ve daha fazlasını kolayca yapılandırmanıza olanak tanır, böylece açılış sayfanız profesyonel ve güvenli bir şekilde yayında olur.

Sonuç

Bu makalede, Gatsby ve TypeScript kullanarak modern, yüksek performanslı ve SEO dostu bir kitapçı açılış sayfası oluşturmanın tüm temel adımlarını detaylı bir şekilde inceledik. Gatsby’nin statik site oluşturma yetenekleri sayesinde elde edilen hız, güvenlik ve düşük maliyetli barındırma avantajları, TypeScript’in sunduğu tip güvenliği ve geliştirici verimliliği ile birleştiğinde, bu tür projeler için son derece güçlü bir kombinasyon oluşturur.

Adım adım proje kurulumundan veri yönetimine (GraphQL ve yerel JSON), yeniden kullanılabilir React bileşenlerinin TypeScript ile nasıl oluşturulacağına, SEO ve performans optimizasyonlarına ve son olarak dağıtım süreçlerine kadar her şeyi ele aldık. Geliştirme süreci boyunca, kod kalitesini artıran ve hataları en aza indiren TypeScript’in faydalarını, aynı zamanda Gatsby’nin zengin eklenti ekosistemi ve GraphQL tabanlı veri katmanının esnekliğini deneyimledik.

Oluşturduğumuz bu açılış sayfası, yeni çıkan kitapları sergilemek, özel kampanyaları duyurmak veya bir etkinliği tanıtmak için güçlü bir pazarlama aracı olarak hizmet edecektir. Bu temel yapı üzerine inşa ederek, gelecekte bülten aboneliği formları, daha detaylı kitap sayfaları veya hatta basit bir e-ticaret entegrasyonu gibi ek özellikler ekleyebilirsiniz. Gatsby ve TypeScript’in bu sinerjisi, hem küçük pazarlama sayfaları hem de büyük ölçekli web uygulamaları için sağlam bir temel sunar. Bu rehberin, kendi kitapçı açılış sayfanızı oluştururken size yol göstermesini ve modern web geliştirme dünyasının sunduğu imkanları keşfetmenizi sağlamasını umuyoruz.

Gatsby ve TypeScript ile Kitapçı Açılış Sayfası (Landing Page) Nasıl Oluşturulur?