Giriş: Gatsby ve Sayfalandırma Neden Önemli?

Giriş: Gatsby ve Sayfalandırma Neden Önemli?

Modern web siteleri genellikle dinamik içeriğe sahip olup, bu içeriğin düzenli ve erişilebilir bir şekilde sunulması kullanıcı deneyimi açısından kritik öneme sahiptir. Gatsby, statik site oluşturucu (SSG) olarak bilinir ve performansı, güvenliği ve geliştirici deneyimiyle öne çıkar. Bir blog, e-ticaret sitesi veya dokümantasyon platformu gibi çok sayıda içeriğe sahip Gatsby projelerinde, tüm içeriği tek bir sayfada göstermek hem yükleme sürelerini uzatır hem de kullanıcıların aradıklarını bulmasını zorlaştırır.

İşte tam bu noktada sayfalandırma (pagination) devreye girer. Sayfalandırma, içeriği mantıksal olarak daha küçük parçalara bölerek farklı sayfalarda sunma yöntemidir. Bu, hem sitenin performansını artırır hem de kullanıcıların içerik arasında kolayca gezinmesini sağlar. Gatsby’nin statik yapısı nedeniyle, sayfalandırma işleminin build zamanında gerçekleşmesi gerekir. Bu, her bir sayfa için ayrı bir HTML dosyasının oluşturulması anlamına gelir.

Gatsby ekosisteminde sayfalandırma çözümleri için birçok seçenek bulunsa da, gatsby-awesome-pagination bu işi son derece basit ve etkili bir şekilde halleden popüler bir eklentidir. Bu eklenti, Gatsby’nin createPages API’sini kullanarak, sorguladığınız verilere göre otomatik olarak sayfalar oluşturur ve bu sayfalara doğru bağlamı (context) sağlar. Böylece, geliştiriciler karmaşık mantık yazmak yerine içeriğe odaklanabilirler. Bu rehberde, gatsby-awesome-pagination‘ı kullanarak Gatsby sitenizde nasıl kapsamlı bir sayfalandırma sistemi kuracağınızı adım adım öğreneceksiniz.

gatsby-awesome-pagination Kurulumu ve Temel Kullanım

gatsby-awesome-pagination‘ı projenize entegre etmek oldukça basittir. İlk adım, eklentiyi projenize kurmaktır.

Kurulum

Projenizin kök dizininde aşağıdaki komutlardan birini çalıştırarak eklentiyi yükleyebilirsiniz:

npm install gatsby-awesome-pagination
veya
yarn add gatsby-awesome-pagination

gatsby-node.js Yapılandırması

Sayfalandırmanın kalbi, Gatsby’nin build sürecinde çalışan gatsby-node.js dosyasıdır. Bu dosya, GraphQL sorgularını kullanarak verileri çeker ve createPages API’si aracılığıyla dinamik olarak sayfalar oluşturur. gatsby-awesome-pagination, bu süreci basitleştirmek için bir paginate fonksiyonu sunar.

Aşağıdaki örnek, Markdown dosyalarından (örneğin blog yazıları) sayfalandırılmış listeler oluşturmayı göstermektedir. Öncelikle, tüm Markdown yazılarını sorgulamanız ve ardından bu verileri paginate fonksiyonuna iletmeniz gerekir.

// gatsby-node.js
const { paginate } = require('gatsby-awesome-pagination');
const path = require('path');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // Blog yazılarını listeleyecek şablonu tanımlayın
  const blogPostListTemplate = path.resolve('./src/templates/blog-list.js');
  const blogPostTemplate = path.resolve('./src/templates/blog-post.js'); // Tekil blog yazıları için

  // Tüm Markdown yazılarını sorgula
  const result = await graphql(
    {
      allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        limit: 1000 // Çok sayıda yazı varsa daha fazlasını çekin
      ) {
        edges {
          node {
            id
            frontmatter {
              slug
            }
          }
        }
      }
    }
  );

  if (result.errors) {
    throw result.errors;
  }

  const posts = result.data.allMarkdownRemark.edges;

  // Tekil blog yazılarını oluştur
  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node;
    const next = index === 0 ? null : posts[index - 1].node;

    createPage({
      path: /blog/${post.node.frontmatter.slug}/,
      component: blogPostTemplate,
      context: {
        slug: post.node.frontmatter.slug,
        previous,
        next,
      },
    });
  });

  // gatsby-awesome-pagination kullanarak sayfalandırılmış listeleri oluştur
  paginate({
    createPage, // Gatsby'nin createPage fonksiyonu
    items: posts, // Sayfalandırılacak öğelerin dizisi
    itemsPerPage: 5, // Her sayfada kaç öğe olacağı
    pathPrefix: '/blog', // Sayfalandırılmış sayfaların URL öneki (örneğin: /blog, /blog/2, /blog/3)
    component: blogPostListTemplate, // Sayfalandırılmış listeyi gösterecek React bileşeni
  });
};

Yukarıdaki kodda önemli noktalar:

• graphql sorgusu, tüm blog yazılarını (allMarkdownRemark) çeker. Bu yazılar daha sonra sayfalandırılacak ana veri kümesini oluşturur.
• paginate fonksiyonu, createPage, items (sayfalandırılacak öğeler), itemsPerPage (sayfa başına öğe sayısı), pathPrefix (URL’lerin başlangıcı) ve component (sayfayı render edecek React şablonu) parametrelerini alır.
• pathPrefix: '/blog' ayarı sayesinde, sayfalar /blog, /blog/2, /blog/3 şeklinde URL’lere sahip olacaktır.

Bu yapılandırma ile Gatsby, build zamanında gerekli tüm sayfalandırılmış listeleme sayfalarını otomatik olarak oluşturacaktır.

Sayfalama Bileşenini Oluşturma ve Verileri Kullanma

gatsby-node.js dosyasında tanımladığımız blogPostListTemplate, yani src/templates/blog-list.js, sayfalandırılmış gönderileri gösterecek React bileşenidir. Bu bileşen, paginate fonksiyonunun sağladığı bağlam (context) verilerine erişebilir.

Şablon Dosyası (src/templates/blog-list.js)

Bu şablon, sayfa başına gönderileri listelemek ve sayfalandırma bağlantılarını göstermek için kullanılacaktır. pageContext objesi, gatsby-awesome-pagination tarafından sağlanan tüm sayfalandırma bilgilerini içerir.

// src/templates/blog-list.js
import React from 'react';
import { graphql, Link } from 'gatsby';

const BlogList = ({ data, pageContext }) => {
  const posts = data.allMarkdownRemark.edges;
  const { humanPageNumber, numberOfPages, previousPagePath, nextPagePath } = pageContext;

  return (
    

      
Blog Yazıları - Sayfa {humanPageNumber}
      

        {posts.map(({ node }) => (
          

            /blog/${node.frontmatter.slug}/}>
              
{node.frontmatter.title}
              
{node.excerpt}
            
          
        ))}
      

      

        
Sayfa Navigasyonu
        

          {previousPagePath && (
            

              ← Önceki Sayfa
            
          )}
          {Array.from({ length: numberOfPages }, (_, i) => (
            
pagination-number${i + 1}}
              style={{
                marginRight: '0.5rem',
                fontWeight: humanPageNumber === i + 1 ? 'bold' : 'normal',
              }}
            >
              /blog : /blog/${i + 1}}>
                {i + 1}
              
            
          ))}
          {nextPagePath && (
            

              Sonraki Sayfa →
            
          )}
        
      
    
  );
};

export default BlogList;

// Sayfa için GraphQL sorgusu
export const query = graphql
  query blogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      skip: $skip
      limit: $limit
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
            slug
          }
          excerpt(pruneLength: 200)
        }
      }
    }
  }
;

Bu bileşendeki kilit noktalar:

• pageContext: Bu prop, gatsby-awesome-pagination tarafından otomatik olarak doldurulur. İçerisinde humanPageNumber (mevcut sayfa numarası), numberOfPages (toplam sayfa sayısı), previousPagePath (önceki sayfanın URL’si) ve nextPagePath (sonraki sayfanın URL’si) gibi yararlı bilgiler bulunur.
• graphql sorgusu: Bu sorgu, $skip ve $limit değişkenlerini kullanarak sadece mevcut sayfaya ait gönderileri çeker. Bu değişkenler, gatsby-node.js‘deki paginate fonksiyonu tarafından otomatik olarak pageContext‘e eklenir ve sorguya iletilir.
• Navigasyon: previousPagePath, nextPagePath ve numberOfPages kullanarak dinamik olarak “Önceki”, “Sonraki” ve sayfa numarası bağlantılarını oluşturabiliriz. Link bileşeni, Gatsby’nin performanslı sayfa geçişlerini sağlar.

Bu şablon sayesinde, her bir sayfalandırılmış sayfa doğru içeriği gösterecek ve kullanıcılar sayfalar arasında rahatça gezinebilecektir.

Gelişmiş Özellikler ve En İyi Uygulamalar

gatsby-awesome-pagination, temel sayfalandırmanın ötesinde, daha esnek ve güçlü çözümler sunmak için bazı gelişmiş özellikler ve en iyi uygulamalarla birlikte kullanılabilir.

Farklı İçerik Türleri ve Birden Fazla Sayfalandırma

Blog yazılarını sayfalandırdığımız gibi, ürünler, kategoriler veya farklı dillerdeki içerikler gibi diğer içerik türlerini de sayfalandırabilirsiniz. Tek yapmanız gereken, gatsby-node.js dosyasında her içerik türü için ayrı bir GraphQL sorgusu yapmak ve her biri için ayrı bir paginate çağrısı yapmaktır. Her paginate çağrısı için farklı bir pathPrefix ve component kullanarak çakışmaları önleyebilirsiniz.

// gatsby-node.js içinde birden fazla paginate örneği
// ... (önceki kodlar)

// Kategorilere göre sayfalandırma örneği
const categories = await graphql(
  {
    allCategory { // Kategori verilerinizi çeken bir sorgu
      group(field: name) {
        fieldValue
        totalCount
      }
    }
  }
);

categories.data.allCategory.group.forEach(category => {
  paginate({
    createPage,
    items: posts.filter(post => post.node.frontmatter.category === category.fieldValue),
    itemsPerPage: 5,
    pathPrefix: /category/${category.fieldValue.toLowerCase()},
    component: path.resolve('./src/templates/category-list.js'), // Kategori listesi şablonu
    context: {
      category: category.fieldValue,
    },
  });
});

Bu örnekte, her kategori için ayrı bir sayfalandırılmış liste oluşturulmuştur. context objesi aracılığıyla kategori adını şablona ileterek, şablon içinde başlığı veya filtrelemeyi özelleştirebilirsiniz.

SEO Dostu Sayfalandırma

Sayfalandırılmış sayfalar için SEO önemlidir. Arama motorlarının içeriğinizi doğru bir şekilde dizine eklemesini sağlamak için aşağıdaki noktaları göz önünde bulundurun:

• Canonical URL’ler: Her sayfalandırılmış sayfa, ana sayfaya veya ilk sayfaya işaret eden bir canonical URL’e sahip olmalıdır. Bu, arama motorlarının yinelenen içerik olarak algılamasını önler. Bunu gatsby-plugin-react-helmet kullanarak yapabilirsiniz.

  // src/templates/blog-list.js içinde  kullanımı
  import { Helmet } from 'react-helmet';
  
  // ... bileşen içinde
  
    https://siteniz.com${pathPrefix}} />
    {previousPagePath && https://siteniz.com${previousPagePath}} />}
    {nextPagePath && https://siteniz.com${nextPagePath}} />}
  
          

• rel="prev" ve rel="next": Bu etiketler, arama motorlarına sayfalar arasındaki ilişkiyi bildirir. gatsby-awesome-pagination‘ın sağladığı previousPagePath ve nextPagePath değerlerini kullanarak bu etiketleri kolayca ekleyebilirsiniz.

Sayfalama Bileşenini Özelleştirme

Yukarıdaki örnekte basit bir navigasyon gösterdik. Kendi CSS’inizi veya bir UI kütüphanesini (örneğin Tailwind CSS, styled-components) kullanarak sayfalandırma bileşenini tamamen özelleştirebilirsiniz. pageContext içindeki tüm veriler (humanPageNumber, numberOfPages, pagePaths vb.) size bu konuda tam kontrol sağlar.

Performans İpuçları

• limit ve skip kullanımı: GraphQL sorgularınızda $limit ve $skip değişkenlerini kullanarak sadece ihtiyacınız olan verileri çekin. gatsby-awesome-pagination bunu sizin için otomatik olarak yapar.
• Gereksiz Veri Çekmekten Kaçının: Sadece sayfalandırılmış listeleme sayfalarında göstereceğiniz alanları (örneğin başlık, özet, slug) sorgulayın. Tekil yazı sayfalarında daha fazla detayı sorgulayabilirsiniz.

Bu gelişmiş özellikler ve en iyi uygulamalarla, Gatsby sitenizde sadece işlevsel değil, aynı zamanda kullanıcı dostu ve arama motoru dostu bir sayfalandırma deneyimi sunabilirsiniz.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Gatsby projelerinde sayfalandırma, büyük içerik kümelerini yönetmek ve kullanıcı deneyimini iyileştirmek için vazgeçilmez bir özelliktir. gatsby-awesome-pagination eklentisi, bu karmaşık görevi Gatsby’nin güçlü createPages API’si ile birleştirerek son derece basit ve etkili bir hale getirir. Bu rehberde, kurulumdan temel kullanıma, sayfalandırma bileşeni oluşturmaktan gelişmiş özelliklere kadar tüm süreci detaylı bir şekilde ele aldık.

Artık Gatsby sitelerinizde içerik akışını düzenleyebilir, performansı artırabilir ve kullanıcılarınızın aradıkları bilgiye daha hızlı ulaşmasını sağlayabilirsiniz. gatsby-awesome-pagination‘ın sunduğu esneklik sayesinde, farklı içerik türleri için birden fazla sayfalandırma sistemi kurabilir, SEO dostu uygulamalarla arama motorlarındaki görünürlüğünüzü artırabilir ve tamamen özelleştirilebilir bir kullanıcı arayüzü sunabilirsiniz.

Sıkça Sorulan Sorular (SSS)

1. gatsby-awesome-pagination farklı içerik türlerini sayfalandırabilir mi?

Evet, kesinlikle. gatsby-node.js dosyanızda her içerik türü için (örneğin, blog yazıları, ürünler, dokümanlar) ayrı GraphQL sorguları yapabilir ve her biri için ayrı paginate çağrıları kullanabilirsiniz. Her çağrı için farklı bir pathPrefix ve React şablonu (component) tanımlamanız yeterlidir.

2. Sayfalama bileşenini nasıl stilize edebilirim?

Sayfalama bileşenini tamamen kendi CSS’inizle, CSS modülleriyle, Styled Components gibi CSS-in-JS kütüphaneleriyle veya Tailwind CSS gibi utility-first CSS framework’leriyle stilize edebilirsiniz. pageContext içindeki humanPageNumber gibi bilgilere erişerek aktif sayfayı vurgulayabilirsiniz.

3. Çok sayıda (örneğin on binlerce) yazı varsa ne yapmalıyım?

Gatsby’nin build süresi, oluşturulan sayfa sayısıyla doğru orantılıdır. Çok sayıda sayfa oluşturmak build süresini uzatabilir. Ancak gatsby-awesome-pagination, $skip ve $limit kullanarak verimli GraphQL sorguları yapmanızı sağlar. Performans sorunları yaşarsanız, Incremental Builds gibi Gatsby Cloud özelliklerini veya daha az kritik sayfaları daha az sıklıkla güncellemeyi düşünebilirsiniz. Ayrıca, gatsby-node.js içindeki limit parametresini artırarak tüm verileri çektiğinizden emin olun.

4. gatsby-awesome-pagination‘ı diğer GraphQL kaynaklarıyla kullanabilir miyim?

Evet, gatsby-source-filesystem ile Markdown dosyalarını kullandığımız gibi, gatsby-source-shopify, gatsby-source-wordpress veya özel bir API’den veri çeken herhangi bir GraphQL kaynağıyla da kullanabilirsiniz. Önemli olan, gatsby-node.js içinde paginate fonksiyonuna ileteceğiniz items dizisinin doğru veri yapısına sahip olmasıdır.

5. Sayfalandırılmış sayfalar için SEO nasıl yapılır?

Her sayfalandırılmış sayfanın HTML bölümüne uygun , ve etiketlerini eklemek önemlidir. gatsby-plugin-react-helmet kullanarak bu etiketleri kolayca yönetebilir ve arama motorlarının sayfalarınız arasındaki ilişkiyi doğru anlamasını sağlayabilirsiniz. Canonical URL’i genellikle ana listeleme sayfasına (örneğin /blog) işaret etmeli, prev ve next ise ilgili önceki ve sonraki sayfalara işaret etmelidir.