Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir yazılım eğitim içeriğidir ve eğitmen tarafından Next.js ve Strapi kullanarak pagination (sayfalama) oluşturma süreci adım adım gösterilmektedir.
- Video, mevcut uygulamanın sorunlarını çözerek başlıyor ve yeni bir "movies" sayfası oluşturuyor. Ardından Strapi'nin limit filtresi kullanarak her sayfada üç film gösterme, Next.js router ile sayfa geçişleri yapma ve önceki/sonraki sayfa butonları oluşturma konularını ele alıyor. Ayrıca Strappy platformunda get server-side props kullanarak sayfa numarasını hesaplama ve Strappy'nin count endpoint'ini kullanarak API'den gelen verilerin sayısını alma işlemleri gösteriliyor.
- Eğitim boyunca kod yazarken pratik çözümler sunuluyor ve Strapi'nin start fonksiyonu gibi pagination için özel özellikleri de gösteriliyor. Video sonunda tüm kodların GitHub'da paylaşıldığı belirtilmektedir.
- 00:00Next.js ve Strapi ile Pagination Hazırlığı
- Bu bölümde Next.js ve Strapi ile pagination nasıl oluşturulacağı öğretiliyor.
- Pagination için önce site düzeltilecek çünkü Strapi'ye eklenen yeni filmler için gerekli alanlar (poster, açıklama) eklenmemiş.
- İyi geliştiriciler iki yöntemle bu sorunu çözebilir: Strapi'de bazı alanları zorunlu yapabilir veya veri yoksa göstermeyi engelleyebilir.
- 01:27Site Sorunlarını Çözme
- Poster URL'si olmadığı için gelen hata, poster URL'si varsa gösterilmesi için bir koşullu ifade ile çözülüyor.
- Genre slug'ı olmadığı için gelen hata, genres yoksa "uncategorized" olarak ayarlanarak çözülüyor.
- Index.js dosyasında flex wrap kullanılarak liste daha düzenli bir görünüme sahip hale getiriliyor.
- 03:27Yeni Sayfa Oluşturma
- Pagination için yeni bir sayfa oluşturuluyor: movies/index.js.
- Bu sayfa, URL'de "/movies" yazıldığında açılacak.
- Fetch ve isomorphic kullanılarak server-side props ile filmler getiriliyor.
- 05:02Pagination İçin Limit Filtresi
- Her sayfada 3 film gösterilecek şekilde limit filtresi uygulanıyor.
- Strapi dokümantasyonunda filtreler bölümünde limit filtresi bulunuyor.
- Get server-side props içinde limit=3 olarak ayarlanıyor.
- 05:58Next ve Previous Butonları
- Next butonu için router kullanılıyor ve sayfa numarası bir artırılıyor.
- Get server-side props içinde page=1 olarak tanımlanıyor.
- Router push ile sayfa numarası URL parametresi olarak gönderiliyor.
- 08:33Sayfa Numarasını İşleme
- Next butonuna tıklandığında sayfa numarası doğru şekilde artırılmıyor.
- Sayfa numarasını parse etmek için parseInt kullanılıyor.
- Router.query ile sayfa numarası alınıyor ve konsolda görüntüleniyor.
- 10:30Önceki Butonu ve Strapi Start Fonksiyonu
- Önceki butonu için eksi işareti kullanılıyor ve sayfa numarası bir azaltılıyor.
- Global stil dosyasında butonlar için stil tanımlanıyor.
- Strapi'nin start fonksiyonu kullanılarak pagination için başlangıç noktası belirlenebiliyor.
- 12:21Dinamik Sayfa Oluşturma
- Filmler sayfasında ilk sayfa Inception, Fight Club ve Alien gibi filmleri içerirken, ikinci sayfa farklı filmleri gösterir.
- Sayfaları dinamik olarak oluşturmak için get server-side props'a basit bir mantık eklenir.
- Başlangıç değeri (start) sayfa numarasına göre hesaplanır: sayfa 1 için 0, sayfa 2 için 1, sayfa 3 için 2 şeklinde.
- 13:48Sayfa Geçişleri ve Kontroller
- Sayfa geçişleri yapıldığında, önceki ve sonraki linkler doğru şekilde çalışır.
- Önceki buton, sayfa 0'a gitmeye çalışıldığında devre dışı bırakılır.
- Sonraki buton, sayfa 4'e gitmeye çalışıldığında devre dışı bırakılır çünkü şu an için 4 sayfa filmler bulunmamaktadır.
- 15:18Strappy ile Sayfa Sayısı Hesaplama
- Sayfa sayısını hesaplamak için Strappy'de "count" endpoint'i kullanılır.
- Bu endpoint, tüm filmleri almak yerine sadece toplam film sayısını döndürür.
- Strappy'de admin panelinden "roles and permissions" kısmından "count" endpoint'i etkinleştirilir.
- 17:43Son Sayfa Hesaplama ve Kontroller
- Son sayfa hesaplaması için "number of movies" değeri 3'e bölünür ve matematiksel tavan alınır.
- Sonraki buton, sayfa değeri son sayfaya eşit veya büyük olduğunda devre dışı bırakılır.
- Film sayısı değiştiğinde (örneğin 2 film silindiğinde), sayfa sayısı otomatik olarak güncellenir.