{"id":38333,"date":"2026-01-29T02:40:57","date_gmt":"2026-01-28T23:40:57","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38333"},"modified":"2026-01-29T02:40:57","modified_gmt":"2026-01-28T23:40:57","slug":"gatsby-link-bileseni-ile-sayfalar-arasi-navigasyon","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gatsby-link-bileseni-ile-sayfalar-arasi-navigasyon\/","title":{"rendered":"Gatsby Link Bile\u015feni ile Sayfalar Aras\u0131 Navigasyon"},"content":{"rendered":"

<\/p>\n

Gatsby Link Bile\u015feni ile Sayfalar Aras\u0131 Navigasyon<\/h2>\n

Geli\u015fen web teknolojileriyle birlikte, kullan\u0131c\u0131 deneyimi ve web sitelerinin performans\u0131 her zamankinden daha kritik hale gelmi\u015ftir. Statik site olu\u015fturucular (SSG) bu alanda \u00f6nemli bir rol oynamakta olup, Gatsby de bu kategorinin \u00f6nde gelen temsilcilerinden biridir. React tabanl\u0131 modern bir framework olan Gatsby, sadece h\u0131zl\u0131 ve g\u00fcvenli web siteleri olu\u015fturmakla kalmaz, ayn\u0131 zamanda zengin bir kullan\u0131c\u0131 deneyimi sunar. Bu deneyimin temel ta\u015flar\u0131ndan biri de sayfalar aras\u0131 h\u0131zl\u0131 ve sorunsuz navigasyondur. \u0130\u015fte bu noktada Gatsby’nin Link<\/code> bile\u015feni devreye girer. Bu makalede, Gatsby Link<\/code> bile\u015feninin ne oldu\u011funu, neden kullan\u0131lmas\u0131 gerekti\u011fini, temel ve geli\u015fmi\u015f kullan\u0131m senaryolar\u0131n\u0131, programatik navigasyonu ve en iyi uygulamalar\u0131 derinlemesine inceleyece\u011fiz.<\/p>\n

Gatsby ve H\u0131zl\u0131 Navigasyonun \u00d6nemi<\/h3>\n

Gatsby, modern web geli\u015ftirme d\u00fcnyas\u0131nda performans, g\u00fcvenlik ve geli\u015ftirici deneyimini bir araya getiren g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. React, GraphQL ve Webpack gibi teknolojileri kullanarak, statik olarak \u00fcretilmi\u015f ancak dinamik bir uygulama hissi veren web siteleri olu\u015fturmay\u0131 m\u00fcmk\u00fcn k\u0131lar. Gatsby’nin temel felsefesi, m\u00fcmk\u00fcn olan en h\u0131zl\u0131 kullan\u0131c\u0131 deneyimini sa\u011flamakt\u0131r. Bu h\u0131z, sadece sayfa y\u00fckleme s\u00fcreleriyle s\u0131n\u0131rl\u0131 de\u011fildir; ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n site i\u00e7inde gezinirken hissetti\u011fi ak\u0131c\u0131l\u0131\u011f\u0131 da kapsar.<\/p>\n

Geleneksel web sitelerinde, bir ba\u011flant\u0131ya t\u0131kland\u0131\u011f\u0131nda taray\u0131c\u0131 t\u00fcm sayfay\u0131 yeniden y\u00fckler. Bu durum, \u00f6zellikle yava\u015f internet ba\u011flant\u0131lar\u0131nda veya b\u00fcy\u00fck sayfalar aras\u0131nda ge\u00e7i\u015f yaparken belirgin bir gecikmeye neden olabilir. Modern web uygulamalar\u0131 ise tek sayfa uygulamalar\u0131 (SPA) mimarisini benimseyerek bu sorunu a\u015fmaya \u00e7al\u0131\u015f\u0131r. Gatsby, statik site avantajlar\u0131n\u0131 SPA’n\u0131n ak\u0131c\u0131l\u0131\u011f\u0131yla birle\u015ftirerek benzersiz bir hibrit yakla\u015f\u0131m sunar. \u0130\u015fte bu noktada Gatsby’nin Link<\/code> bile\u015feni, bu ak\u0131c\u0131 deneyimi sa\u011flamak i\u00e7in kilit bir rol oynar. Standart HTML <\/code> etiketinin aksine, Link<\/code> bile\u015feni sayfalar aras\u0131 ge\u00e7i\u015fleri tam bir sayfa yeniden y\u00fcklemesi yerine, JavaScript arac\u0131l\u0131\u011f\u0131yla yapar, bu da an\u0131nda ge\u00e7i\u015fler ve daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/p>\n

Gatsby’nin Temel Navigasyon Mekanizmas\u0131<\/h3>\n

Gatsby’nin navigasyon sistemi, dosya sistemi tabanl\u0131 y\u00f6nlendirme (file-system routing) prensibi \u00fczerine kuruludur. Bu, src\/pages<\/code> dizini alt\u0131ndaki her bir React bile\u015feninin otomatik olarak bir web sayfas\u0131 haline geldi\u011fi anlam\u0131na gelir. \u00d6rne\u011fin, src\/pages\/about.js<\/code> dosyas\u0131 \/about<\/code> URL’sine kar\u015f\u0131l\u0131k gelirken, src\/pages\/blog\/index.js<\/code> dosyas\u0131 \/blog<\/code> URL’sine kar\u015f\u0131l\u0131k gelecektir. Bu otomatik yap\u0131land\u0131rma, geli\u015ftiricilerin y\u00f6nlendirme tablolar\u0131n\u0131 manuel olarak tan\u0131mlama ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve projenin b\u00fcy\u00fcmesiyle birlikte y\u00f6netimi kolayla\u015ft\u0131r\u0131r.<\/p>\n

Gatsby’nin derleme s\u00fcreci s\u0131ras\u0131nda, her bir sayfa i\u00e7in statik HTML dosyalar\u0131 ve gerekli JavaScript, CSS ve veri dosyalar\u0131 olu\u015fturulur. Ancak Link<\/code> bile\u015feninin sihirli yan\u0131, bu statik yap\u0131lar\u0131n \u00fczerine bir “hidratasyon” katman\u0131 eklemesidir. Taray\u0131c\u0131da JavaScript y\u00fcklendikten sonra, Gatsby siteniz bir SPA gibi davranmaya ba\u015flar. Link<\/code> bile\u015feni, t\u0131kland\u0131\u011f\u0131nda taray\u0131c\u0131n\u0131n yerel ge\u00e7mi\u015f API’sini (History API) kullanarak URL’yi de\u011fi\u015ftirir ve yaln\u0131zca yeni sayfan\u0131n i\u00e7eri\u011fini (bile\u015fenlerini ve verilerini) y\u00fckler. Tam bir sayfa yeniden y\u00fcklemesi yerine, Gatsby yaln\u0131zca de\u011fi\u015fen k\u0131s\u0131mlar\u0131 g\u00fcnceller, bu da ge\u00e7i\u015fleri inan\u0131lmaz derecede h\u0131zl\u0131 hale getirir. Ayr\u0131ca, Gatsby ak\u0131ll\u0131 bir \u015fekilde, kullan\u0131c\u0131n\u0131n muhtemelen bir sonraki t\u0131klayaca\u011f\u0131 ba\u011flant\u0131lar\u0131n kaynaklar\u0131n\u0131 (HTML, JavaScript, veri) \u00f6nceden y\u00fckleyerek (prefetching) performans\u0131 daha da art\u0131r\u0131r. Bu \u00f6n y\u00fckleme, kullan\u0131c\u0131 ba\u011flant\u0131ya t\u0131klad\u0131\u011f\u0131nda sayfan\u0131n neredeyse an\u0131nda g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n

Link<\/code> Bile\u015feni Nedir ve Neden Kullan\u0131l\u0131r?<\/h3>\n

Link<\/code> bile\u015feni, Gatsby taraf\u0131ndan sa\u011flanan ve dahili sayfalar aras\u0131nda gezinmek i\u00e7in tasarlanm\u0131\u015f bir React bile\u015fenidir. Temel olarak bir <\/code> etiketi gibi g\u00f6r\u00fcnse de, Gatsby ekosisteminde \u00e7ok daha fazlas\u0131n\u0131 sunar.<\/p>\n

Link<\/code> Bile\u015feninin Avantajlar\u0131:<\/h4>\n

1. Client-Side Navigasyon (SPA Benzeri Deneyim):<\/strong> Link<\/code> bile\u015feni, tam bir sayfa yeniden y\u00fcklemesi yerine, JavaScript kullanarak taray\u0131c\u0131n\u0131n URL’sini de\u011fi\u015ftirir ve sadece yeni sayfan\u0131n i\u00e7eri\u011fini i\u015fler. Bu, kullan\u0131c\u0131lara tek sayfa uygulama (SPA) benzeri, kesintisiz ve ak\u0131c\u0131 bir gezinme deneyimi sunar.
\n2. Performans Optimizasyonu (Prefetching):<\/strong> Gatsby, Link<\/code> bile\u015fenlerini kullanarak g\u00f6r\u00fcn\u00fcrdeki veya viewport’a yak\u0131n olan sayfalar\u0131n kaynaklar\u0131n\u0131 (HTML, JavaScript, veri) otomatik olarak \u00f6nceden y\u00fckler (prefetching). Bu sayede kullan\u0131c\u0131 bir ba\u011flant\u0131ya t\u0131klad\u0131\u011f\u0131nda, sayfa neredeyse an\u0131nda y\u00fcklenir \u00e7\u00fcnk\u00fc gerekli t\u00fcm kaynaklar zaten taray\u0131c\u0131 \u00f6nbelle\u011finde mevcuttur.
\n3. Eri\u015filebilirlik (Accessibility):<\/strong> Link<\/code> bile\u015feni, taray\u0131c\u0131n\u0131n ge\u00e7mi\u015fini do\u011fru bir \u015fekilde y\u00f6netir ve ekran okuyucular gibi yard\u0131mc\u0131 teknolojilerle uyumlu \u00e7al\u0131\u015f\u0131r. Bu, sitenizin daha geni\u015f bir kullan\u0131c\u0131 kitlesi i\u00e7in eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.
\n4. SEO Dostu:<\/strong> Gatsby, statik HTML sayfalar\u0131 \u00fcretti\u011fi i\u00e7in arama motorlar\u0131 taraf\u0131ndan kolayca taranabilir. Link<\/code> bile\u015feni ile yap\u0131lan dahili gezinmeler, arama motorlar\u0131n\u0131n sitenizin yap\u0131s\u0131n\u0131 ve sayfalar aras\u0131 ili\u015fkileri anlamas\u0131na engel olmaz. Aksine, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve iyi bir kullan\u0131c\u0131 deneyimi, SEO s\u0131ralamalar\u0131n\u0131 olumlu etkileyen fakt\u00f6rlerdir.
\n5. Geli\u015ftirici Deneyimi:<\/strong> Gatsby’nin dosya sistemi tabanl\u0131 y\u00f6nlendirmesiyle birle\u015fti\u011finde, Link<\/code> bile\u015fenini kullanmak son derece sezgiseldir. Geli\u015ftiricilerin karma\u015f\u0131k y\u00f6nlendirme yap\u0131land\u0131rmalar\u0131yla u\u011fra\u015fmas\u0131na gerek kalmaz.<\/p>\n

Standart <\/code> Etiketi ile Kar\u015f\u0131la\u015ft\u0131rma:<\/h4>\n

* <\/code> Etiketi:<\/strong>
\n * Her t\u0131klamada tam bir sayfa yeniden y\u00fcklemesi yapar.
\n * Daha yava\u015f bir kullan\u0131c\u0131 deneyimi sunar.
\n * D\u0131\u015f ba\u011flant\u0131lar (ba\u015fka bir web sitesine) veya dosya indirmeleri i\u00e7in uygundur.
\n * Gatsby’nin performans optimizasyonlar\u0131ndan faydalanmaz.
\n* Link<\/code> Bile\u015feni:<\/strong>
\n * Client-side navigasyon ile sayfa yeniden y\u00fcklemesi yapmaz.
\n * An\u0131nda ge\u00e7i\u015fler ve ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar.
\n * Yaln\u0131zca dahili Gatsby sayfalar\u0131 aras\u0131nda gezinmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.
\n * Gatsby’nin prefetching ve di\u011fer performans optimizasyonlar\u0131ndan tam olarak yararlan\u0131r.<\/p>\n

\u00d6zetle, Gatsby uygulaman\u0131z i\u00e7inde bir sayfadan di\u011ferine ge\u00e7i\u015f yapman\u0131z gerekti\u011finde, standart <\/code> etiketi yerine her zaman Link<\/code> bile\u015fenini kullanmal\u0131s\u0131n\u0131z. Bu, hem performans hem de kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan en iyi uygulamad\u0131r.<\/p>\n

Link<\/code> Bile\u015feninin Temel Kullan\u0131m\u0131<\/h3>\n

Gatsby Link<\/code> bile\u015fenini kullanmak olduk\u00e7a basittir. \u0130lk ad\u0131m, bile\u015feni Gatsby’den projenize aktarmakt\u0131r.<\/p>\n

1. Link<\/code> Bile\u015fenini \u0130\u00e7e Aktarma:<\/h4>\n
import { Link } from 'gatsby';<\/code><\/pre>\n
Bu ifadeyi, Link<\/code> bile\u015fenini kullanaca\u011f\u0131n\u0131z herhangi bir React bile\u015feninin (\u00f6rne\u011fin, bir navigasyon men\u00fcs\u00fc, bir blog g\u00f6nderisi listesi vb.) en \u00fcst\u00fcne eklemeniz gerekir.<\/p>\n
2. Temel Kullan\u0131m:<\/h4>\n
Link<\/code> bile\u015feninin en \u00f6nemli prop’u to<\/code> prop’udur. Bu prop, kullan\u0131c\u0131n\u0131n t\u0131klamas\u0131 durumunda hangi sayfaya y\u00f6nlendirilece\u011fini belirtir. De\u011feri, Gatsby projenizdeki bir sayfan\u0131n yolu olmal\u0131d\u0131r.<\/p>\n
import React from 'react';\nimport { Link } from 'gatsby';\n\nconst Header = () => (\n