Gatsby Link Bileşeni ile Sayfalar Arası Navigasyon

Gatsby’nin Temel Navigasyon Mekanizması

Gatsby’nin navigasyon sistemi, dosya sistemi tabanlı yönlendirme (file-system routing) prensibi üzerine kuruludur. Bu, src/pages dizini altındaki her bir React bileşeninin otomatik olarak bir web sayfası haline geldiği anlamına gelir. Örneğin, src/pages/about.js dosyası /about URL’sine karşılık gelirken, src/pages/blog/index.js dosyası /blog URL’sine karşılık gelecektir. Bu otomatik yapılandırma, geliştiricilerin yönlendirme tablolarını manuel olarak tanımlama ihtiyacını ortadan kaldırır ve projenin büyümesiyle birlikte yönetimi kolaylaştırır.

Gatsby’nin derleme süreci sırasında, her bir sayfa için statik HTML dosyaları ve gerekli JavaScript, CSS ve veri dosyaları oluşturulur. Ancak Link bileşeninin sihirli yanı, bu statik yapıların üzerine bir “hidratasyon” katmanı eklemesidir. Tarayıcıda JavaScript yüklendikten sonra, Gatsby siteniz bir SPA gibi davranmaya başlar. Link bileşeni, tıklandığında tarayıcının yerel geçmiş API’sini (History API) kullanarak URL’yi değiştirir ve yalnızca yeni sayfanın içeriğini (bileşenlerini ve verilerini) yükler. Tam bir sayfa yeniden yüklemesi yerine, Gatsby yalnızca değişen kısımları günceller, bu da geçişleri inanılmaz derecede hızlı hale getirir. Ayrıca, Gatsby akıllı bir şekilde, kullanıcının muhtemelen bir sonraki tıklayacağı bağlantıların kaynaklarını (HTML, JavaScript, veri) önceden yükleyerek (prefetching) performansı daha da artırır. Bu ön yükleme, kullanıcı bağlantıya tıkladığında sayfanın neredeyse anında görünmesini sağlar.

Link Bileşeni Nedir ve Neden Kullanılır?

Link Bileşeninin Avantajları:

1. Client-Side Navigasyon (SPA Benzeri Deneyim): Link bileşeni, tam bir sayfa yeniden yüklemesi yerine, JavaScript kullanarak tarayıcının URL’sini değiştirir ve sadece yeni sayfanın içeriğini işler. Bu, kullanıcılara tek sayfa uygulama (SPA) benzeri, kesintisiz ve akıcı bir gezinme deneyimi sunar.
2. Performans Optimizasyonu (Prefetching): Gatsby, Link bileşenlerini kullanarak görünürdeki veya viewport’a yakın olan sayfaların kaynaklarını (HTML, JavaScript, veri) otomatik olarak önceden yükler (prefetching). Bu sayede kullanıcı bir bağlantıya tıkladığında, sayfa neredeyse anında yüklenir çünkü gerekli tüm kaynaklar zaten tarayıcı önbelleğinde mevcuttur.
3. Erişilebilirlik (Accessibility): Link bileşeni, tarayıcının geçmişini doğru bir şekilde yönetir ve ekran okuyucular gibi yardımcı teknolojilerle uyumlu çalışır. Bu, sitenizin daha geniş bir kullanıcı kitlesi için erişilebilir olmasını sağlar.
4. SEO Dostu: Gatsby, statik HTML sayfaları ürettiği için arama motorları tarafından kolayca taranabilir. Link bileşeni ile yapılan dahili gezinmeler, arama motorlarının sitenizin yapısını ve sayfalar arası ilişkileri anlamasına engel olmaz. Aksine, hızlı yükleme süreleri ve iyi bir kullanıcı deneyimi, SEO sıralamalarını olumlu etkileyen faktörlerdir.
5. Geliştirici Deneyimi: Gatsby’nin dosya sistemi tabanlı yönlendirmesiyle birleştiğinde, Link bileşenini kullanmak son derece sezgiseldir. Geliştiricilerin karmaşık yönlendirme yapılandırmalarıyla uğraşmasına gerek kalmaz.

Link Bileşeninin Temel Kullanımı

Gatsby Link bileşenini kullanmak oldukça basittir. İlk adım, bileşeni Gatsby’den projenize aktarmaktır.

1. Link Bileşenini İçe Aktarma:

import { Link } from 'gatsby';

Bu ifadeyi, Link bileşenini kullanacağınız herhangi bir React bileşeninin (örneğin, bir navigasyon menüsü, bir blog gönderisi listesi vb.) en üstüne eklemeniz gerekir.

2. Temel Kullanım:

Link bileşeninin en önemli prop’u to prop’udur. Bu prop, kullanıcının tıklaması durumunda hangi sayfaya yönlendirileceğini belirtir. Değeri, Gatsby projenizdeki bir sayfanın yolu olmalıdır.

import React from 'react';
import { Link } from 'gatsby';

const Header = () => (
  
);

export default Header;

Yukarıdaki örnekte:
* Ana Sayfa: Sitenizin kök dizinine (genellikle ana sayfa) yönlendirir.
* Hakkımızda: src/pages/about.js veya src/pages/about/index.js ile eşleşen /about sayfasına yönlendirir.
* Blog: /blog sayfasına yönlendirir.
* İletişim: /contact sayfasına yönlendirir.

3. Relative (Göreceli) ve Absolute (Mutlak) Yollar:

to prop’una hem mutlak hem de göreceli yollar sağlayabilirsiniz:

* Mutlak Yollar: Genellikle bir / ile başlar ve sitenin kök dizininden itibaren tam yolu belirtir. Yukarıdaki örneklerdeki tüm yollar mutlak yollardır.

Elektronik Ürünler

* Göreceli Yollar: Mevcut sayfanın URL’sine göre belirlenir. Örneğin, /blog/my-post sayfasındaysanız:

// /blog/my-post/comments sayfasına gider
    Yorumlar 

    // /blog sayfasına gider (bir dizin yukarı)
    Blog Ana Sayfa

Göreceli yollar, özellikle derin iç içe geçmiş dizin yapılarına sahip bloglar veya dokümantasyon siteleri gibi yerlerde kullanışlı olabilir, ancak genellikle mutlak yollar daha net ve hata yapma olasılığı daha düşüktür. Yeni başlayanlar için mutlak yollarla başlamak genellikle daha güvenlidir.

Link bileşeninin temel kullanımı bu kadar basittir. Ancak Gatsby, kullanıcı deneyimini daha da zenginleştirmek için bir dizi gelişmiş özellik ve prop sunar.

Link Bileşeninin Gelişmiş Özellikleri ve Prop’ları

Gatsby Link bileşeni, sadece temel navigasyon sağlamakla kalmaz, aynı zamanda kullanıcı deneyimini ve arayüz etkileşimlerini geliştirmek için çeşitli gelişmiş prop’lar sunar.

1. activeClassName: Aktif Bağlantıyı Vurgulama

Bir navigasyon menüsünde, kullanıcının o anda hangi sayfada olduğunu belirtmek yaygın bir UI desenidir. activeClassName prop’u, Link bileşeninin to prop’unda belirtilen yolla mevcut sayfanın yolu eşleştiğinde uygulanacak bir CSS sınıfı adı tanımlamanıza olanak tanır.

import React from 'react';
import { Link } from 'gatsby';

const Navbar = () => (
  
);

export default Navbar;

CSS Örneği (src/styles/global.css veya bir modül CSS dosyası içinde):

/ global.css /
.active-link {
  font-weight: bold;
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

Bu örnekte, kullanıcı /about sayfasındayken “Hakkımızda” bağlantısına active-link sınıfı uygulanacak ve bu bağlantı kalın ve mavi renkte görünecektir.

2. activeStyle: Aktif Bağlantıya Inline Stil Uygulama

activeClassName yerine veya onunla birlikte, activeStyle prop’unu kullanarak aktif bağlantıya doğrudan inline CSS stilleri uygulayabilirsiniz.

import React from 'react';
import { Link } from 'gatsby';

const Navbar = () => (
  
);

export default Navbar;

Genellikle, büyük projelerde ve tutarlı bir tasarım sağlamak için activeClassName kullanmak daha iyi bir yaklaşımdır, ancak hızlı prototipler veya çok spesifik durumlar için activeStyle kullanışlı olabilir.

3. partiallyActive: Kısmi Eşleşmeleri Vurgulama

activeClassName varsayılan olarak tam yol eşleşmesi gerektirir. Yani /blog bağlantısı sadece /blog sayfasında aktif olur, /blog/my-first-post sayfasında değil. partiallyActive prop’unu true olarak ayarlayarak, bir bağlantının URL’si mevcut sayfanın URL’sinin bir ön eki olduğunda da aktif olmasını sağlayabilirsiniz. Bu, bir blog veya kategori sayfaları gibi hiyerarşik yapılarda çok kullanışlıdır.

import React from 'react';
import { Link } from 'gatsby';

const Navbar = () => (
  
);

export default Navbar;

Bu durumda, /blog bağlantısı hem /blog sayfasında hem de /blog/my-first-post, /blog/category/tech gibi alt sayfalarda aktif olacaktır.

4. state: Sayfalar Arası Durum (State) Aktarımı

Bazen, bir sayfadan diğerine geçerken URL’de görünmesini istemediğiniz veya URL parametresi olarak geçirilmesi uygun olmayan verileri aktarmanız gerekebilir. state prop’u, bir JavaScript nesnesi aracılığıyla bu tür verileri aktarmanızı sağlar.

// Kaynak sayfa (örneğin, Ürün Listesi)
import React from 'react';
import { Link } from 'gatsby';

const ProductList = () => {
  const product = {
    id: 'prod_123',
    name: 'Akıllı Telefon',
    price: 999,
    fromPage: '/products' // Hangi sayfadan geldiğimizi belirtiyoruz
  };

  return (
    

      
      product objesini productData adıyla aktarıyoruz
      >
        {product.name} Detayları
      
    
  );
};

export default ProductList;

Hedef Sayfada (src/pages/product-detail.js) Duruma Erişim:

Hedef sayfada, location prop’u aracılığıyla bu duruma erişebilirsiniz. Gatsby sayfaları, varsayılan olarak location prop’unu alır.

import React from 'react';

const ProductDetailPage = ({ location }) => {
  const productData = location.state?.productData; // state objesine güvenli erişim

  if (!productData) {
    return 
Ürün bilgisi bulunamadı.
;
  }

  return (
    

      
      
ID: {productData.id}
      
Fiyat: ${productData.price}
      
Geldiği Sayfa: {productData.fromPage}
      {/ ...diğer ürün detayları /}
    
  );
};

export default ProductDetailPage;

state prop’u, özellikle form gönderimleri sonrası mesajları gösterme, belirli bir filtreleme durumunu koruma veya geçici verileri iletme gibi senaryolarda oldukça kullanışlıdır.

5. replace: Geçmişi Değiştirme

Varsayılan olarak, Link bileşeni yeni bir sayfaya gittiğinde tarayıcının geçmişine yeni bir giriş ekler. Bu, kullanıcının “Geri” butonuna basarak önceki sayfaya dönmesini sağlar. Ancak bazen, mevcut sayfayı geçmişten silip yerine yeni sayfayı koymak isteyebilirsiniz (örneğin, bir form gönderimi sonrası veya bir oturum açma işleminden sonra kullanıcının geri tuşuna basarak oturum açma sayfasına dönmesini engellemek için). replace prop’unu true olarak ayarlayarak bunu yapabilirsiniz.

Gösterge Paneli'ne Git (Geçmişi Değiştir)

Bu durumda, kullanıcı /dashboard sayfasına gittiğinde, tarayıcı geçmişindeki mevcut sayfa /dashboard ile değiştirilir.

6. getProps: Dinamik Bağlantı Prop’ları Oluşturma

getProps prop’u, Link bileşenine dinamik olarak prop’lar uygulamanıza olanak tanıyan bir fonksiyondur. Bu fonksiyon, bağlantının mevcut durumu hakkında bilgi içeren bir obje alır ve bir prop objesi döndürmelidir. Bu, özellikle karmaşık aktif bağlantı stilleri veya diğer koşullu prop’lar için kullanışlıdır.

import React from 'react';
import { Link } from 'gatsby';

const CustomLink = ({ to, children }) => (
   {
      // isCurrent: to prop'u mevcut URL ile tam eşleşiyor mu?
      // isPartiallyCurrent: to prop'u mevcut URL'nin bir ön eki mi?
      const className = isCurrent || isPartiallyCurrent ? 'custom-active-link' : '';
      const style = isCurrent ? { borderBottom: '2px solid purple' } : {};
      
      return { className, style };
    }}
  >
    {children}
  
);

const Navbar = () => (
  
);

export default Navbar;

getProps fonksiyonu, activeClassName ve activeStyle‘dan daha fazla esneklik sağlar, çünkü isCurrent ve isPartiallyCurrent gibi değerlere dayalı olarak birden fazla prop’u dinamik olarak ayarlamanıza olanak tanır.

Bu gelişmiş prop’lar, Gatsby Link bileşenini sadece bir navigasyon aracı olmaktan çıkarıp, zengin ve etkileşimli bir kullanıcı arayüzü oluşturmak için güçlü bir araç haline getirir.

Programatik Navigasyon: navigate Fonksiyonu

Bazı durumlarda, bir sayfaya doğrudan bir bağlantı tıklamasıyla değil, bir JavaScript olayı (örneğin, bir form gönderimi, bir buton tıklaması, bir API çağrısı sonrası) sonucunda programatik olarak yönlendirme yapmanız gerekebilir. Gatsby, bu tür senaryolar için navigate fonksiyonunu sağlar.

1. navigate Fonksiyonunu İçe Aktarma:

navigate fonksiyonu da gatsby paketinden içe aktarılır.

import { navigate } from 'gatsby';

2. Temel Kullanım:

navigate fonksiyonu, yönlendirilecek yolu bir string olarak parametre olarak alır.

import React from 'react';
import { navigate } from 'gatsby';

const MyForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    // Form verilerini işleyin...
    
    // İşlem bittikten sonra kullanıcıyı başka bir sayfaya yönlendirin
    navigate('/success'); 
  };

  return (
    

      {/ Form elemanları /}
      Gönder
    
  );
};

export default MyForm;

3. navigate ile Gelişmiş Seçenekler:

navigate fonksiyonu, Link bileşeninin bazı prop’larına benzer seçenekleri ikinci bir obje parametresi olarak kabul edebilir:

* replace: true olarak ayarlanırsa, tarayıcı geçmişindeki mevcut girişi yeni yolla değiştirir. Link bileşenindeki replace prop’uyla aynı işlevi görür.

navigate('/login', { replace: true }); // Oturum açma sayfasını geçmişten sil

* state: Link bileşenindeki state prop’u gibi, sayfalar arası durum aktarımı için bir obje göndermenizi sağlar.

const handleProductClick = (productId) => {
      navigate('/product-detail', { state: { productId: productId, source: 'homepage' } });
    };

Hedef sayfada, location.state aracılığıyla bu verilere erişilebilir.
* from: Dahili olarak Gatsby tarafından kullanılır ve genellikle manuel olarak ayarlamanız gerekmez.

navigate fonksiyonu, kullanıcı etkileşimine dayalı veya dinamik olarak belirlenen yönlendirmeler için vazgeçilmez bir araçtır. Örneğin, bir kullanıcının yetkilendirme durumuna göre farklı sayfalara yönlendirme yapmak, bir hata durumunda belirli bir hata sayfasına göndermek veya bir arama kutusundan gelen sorguya göre sonuç sayfasına gitmek gibi senaryolarda sıkça kullanılır.

SEO ve Erişilebilirlik İpuçları

Web sitenizin başarısı için sadece hızlı ve fonksiyonel olması yetmez; aynı zamanda arama motorları tarafından kolayca bulunabilmesi (SEO) ve herkes tarafından kullanılabilir olması (Erişilebilirlik) gerekir. Gatsby Link bileşenini kullanırken bu iki alanı da göz önünde bulundurmak önemlidir.

SEO İpuçları:

1. Anlamlı Bağlantı Metinleri: Bağlantılarınızın metinleri (anchor text), hedef sayfanın içeriğini açıkça belirtmelidir. “Buraya tıklayın” veya “Daha fazla oku” gibi genel ifadeler yerine, “Ürün Detayları”, “Hakkımızda Sayfası” veya “Blog Yazısı Başlığı” gibi açıklayıcı metinler kullanın. Arama motorları, bağlantı metinlerini kullanarak sayfalarınızın ne hakkında olduğunu anlamaya çalışır.
2. Temiz ve Anlaşılır URL’ler: Gatsby, dosya sistemi tabanlı yönlendirme sayesinde genellikle temiz URL’ler oluşturur (/about, /blog/my-post). Bu URL’ler, kullanıcılar ve arama motorları için kolayca okunabilir ve anlaşılabilir olmalıdır.
3. Dahili Bağlantı Yapısı: Link bileşeni ile siteniz içindeki sayfalar arasında mantıklı ve hiyerarşik bir bağlantı yapısı oluşturun. Bu, arama motorlarının sitenizi daha verimli bir şekilde taramasına ve sayfalarınız arasındaki ilişkiyi anlamasına yardımcı olur. Ayrıca, önemli sayfalarınıza daha fazla dahili bağlantı vererek bu sayfaların arama motoru sıralamasını artırabilirsiniz.
4. Hızlı Yükleme Süreleri: Gatsby’nin Link bileşeni ve genel optimizasyonları sayesinde siteniz zaten hızlı yüklenir. Hızlı yükleme süreleri, arama motoru sıralamaları için önemli bir faktördür ve kullanıcı deneyimini doğrudan etkiler.

Erişilebilirlik (Accessibility) İpuçları:

1. Anlamlı Bağlantı Metinleri (Tekrar): Erişilebilirlik açısından da bağlantı metinleri kritik öneme sahiptir. Ekran okuyucular kullanan kişiler, bağlantı metinlerine göre sayfalar arasında gezinirler. Anlamlı metinler, bu kullanıcılara nereye gidecekleri konusunda net bir fikir verir.
2. Klavye Navigasyonu: Link bileşeni, varsayılan olarak klavye ile gezinmeye (Tab tuşu ile odaklanma, Enter tuşu ile tıklama) uygun şekilde tasarlanmıştır. Ancak, özel bir navigasyon bileşeni oluştururken veya Link bileşenini sarmalarken, bu işlevselliği bozmadığınızdan emin olun. Kullanıcıların yalnızca klavye kullanarak sitenizde tamamen gezinebildiğinden emin olun.
3. Odak Yönetimi: Bir Link bileşenine tıklandığında, Gatsby yeni sayfanın içeriğine odaklanmayı otomatik olarak yönetir. Bu, ekran okuyucuların ve klavye kullanıcılarının yeni sayfanın içeriğini hemen algılamasına yardımcı olur. Özel bir yönlendirme mantığı uyguluyorsanız, yeni sayfa yüklendiğinde odağı sayfa başlığına veya ana içeriğe taşıdığınızdan emin olun.
4. aria-label Kullanımı: Bağlantı metninin görsel olarak kısa olması gerektiği ancak daha fazla bağlam gerektirdiği durumlarda aria-label özniteliğini kullanabilirsiniz. Örneğin:

JD

Bu, ekran okuyucular için daha zengin bir açıklama sağlar.

Gatsby Link bileşeni, doğru kullanıldığında hem SEO hem de erişilebilirlik açısından sağlam bir temel sunar. Bu ipuçlarını uygulayarak, daha geniş bir kitleye ulaşan ve herkes için kullanılabilir olan yüksek performanslı bir web sitesi oluşturabilirsiniz.

Yaygın Hatalar ve Çözümleri

Gatsby Link bileşenini kullanırken geliştiricilerin sıkça karşılaştığı bazı hatalar ve bunların nasıl çözülebileceği aşağıda listelenmiştir:

2. Link Bileşenini İçe Aktarmayı Unutmak:
* Hata: Link bileşenini kullanmaya çalışırken Link is not defined gibi bir hata almak.
* Neden Hata: Link bir React bileşeni olduğu için kullanılmadan önce içe aktarılması gerekir.
* Çözüm: Bileşeni kullandığınız dosyanın en üstüne import { Link } from 'gatsby'; ekleyin. Aynı durum navigate fonksiyonu için de geçerlidir.

3. to Prop’unda Yanlış Yollar Belirtmek:
* Hata: to prop’unda var olmayan bir yola işaret etmek veya yazım hatası yapmak (örn. Hakkımızda).
* Neden Hata: Bu, kullanıcının “404 Not Found” sayfasına yönlendirilmesine neden olur.
* Çözüm: Yolların doğru olduğundan ve Gatsby’nin dosya sistemi tabanlı yönlendirme kurallarına uyduğundan emin olun. Geliştirme modunda (gatsby develop), Gatsby genellikle var olmayan yolları tespit etmenize yardımcı olacak uyarılar verir.

4. activeClassName ve partiallyActive Karışıklığı:
* Hata: Bir menüde /blog bağlantısının, /blog/post-1 sayfasında aktif olmasını beklerken olmaması.
* Neden Hata: activeClassName varsayılan olarak tam yol eşleşmesi gerektirir.
* Çözüm: Hiyerarşik yapılarda kısmi eşleşmeleri vurgulamak için partiallyActive={true} prop’unu kullanın: Blog.

Bu yaygın hatalardan kaçınarak, Gatsby Link bileşenini daha verimli ve sorunsuz bir şekilde kullanabilir, sitenizin performansını ve kullanıcı deneyimini en üst düzeye çıkarabilirsiniz.

Örnek Uygulama: Basit Bir Navigasyon Menüsü

Şimdiye kadar öğrendiklerimizi pekiştirmek için Gatsby Link bileşenini kullanarak basit ama işlevsel bir navigasyon menüsü oluşturalım. Bu menü, activeClassName ve partiallyActive özelliklerini de gösterecektir.

Öncelikle, src/components/Header.js adında bir bileşen oluşturalım:

Sonuç

Gatsby’nin prefetching mekanizması sayesinde Link bileşeni, kullanıcıların sayfalar arasında neredeyse anında geçiş yapmasını sağlayarak olağanüstü bir kullanıcı deneyimi sunar. Bu hızlı gezinme, sitenizin SEO performansını olumlu etkilerken, doğru bağlantı metinleri ve erişilebilirlik uygulamalarıyla birleştiğinde sitenizi daha geniş bir kitle için ulaşılabilir ve kullanılabilir hale getirir.

Son olarak, Link bileşenini kullanırken karşılaşılabilecek yaygın hataları ve bu hatalardan nasıl kaçınılacağını öğrendik. Bu bilgi birikimiyle, Gatsby projelerinizde hem hızlı hem de kullanıcı dostu navigasyon sistemleri tasarlayabilir ve uygulayabilirsiniz. Gatsby’nin gücünü tam olarak kullanmak için Link bileşenini doğru ve bilinçli bir şekilde entegre etmek, modern web siteleri oluşturmanın vazgeçilmez bir parçasıdır.