İçeriğe geç
Reusable List

Reusable List Page Architecture

Tek bir liste sayfası sistemi. Dört farklı kullanım alanı.

URL tabanlı arama, filtreleme, sıralama, sayfalama, görünüm değiştirme, seçim, toplu işlemler ve sistem durumlarını tek bir yeniden kullanılabilir Next.js mimarisi üzerinde gösteren interaktif bir proje.

Örnekleri keşfetMimariyi incele

Next.js · React · TypeScript · Tailwind CSS · shadcn/ui

TL;DR

Proje, tekrar eden liste sayfası davranışlarını sayfaya özgü sunum ve iş mantığından ayırır. URL yönetimi, kontroller, sonuç düzenleri, sayfalama, seçim ve sistem durumları ortak bir çekirdekte tutulurken; her özellik kendi verilerini, filtrelerini, sorgu servisini, araç çubuğunu ve görünüm bileşenlerini yönetir.

Dört farklı örnek, aynı yapının farklı veri modelleri ve etkileşim ihtiyaçlarıyla nasıl kullanılabildiğini gösterir. Referans sayfaları ise parçaların nasıl bir araya geldiğini, ortak yapıların ne yaptığını ve verinin URL, Server Component'ler, Client Component'ler ve mock Route Handler'lar arasında nasıl aktığını açıklar.

Dört örnek, tek bir temel

Her örnek, kendine özgü davranışlarını korurken aynı liste sayfası mimarisini kullanır.

  • Bileşenler

    Birden fazla framework seçimi, kategori ve durum filtreleri, sıralama, sayfalama ve liste/ızgara görünümleri sunan bir bileşen kataloğu.

    • Çoklu seçim filtreleri
    • Liste ve ızgara
    • Etkin filtreler
    Bileşenleri aç

  • Sorunlar

    Ortak mimariyi tablo görünümü, satır seçimi, tümünü seçme ve demo amaçlı toplu durum işlemleriyle genişleten bir sorun takip örneği.

    • Satır seçimi
    • Toplu işlemler
    • Hata yönetimi
    Sorunları aç

  • Dağıtımlar

    Ortam, branch, durum ve tarih aralığı filtrelerinin yanı sıra dağıtıma özgü durum ve göreli zaman gösterimleri sunan bir deployment geçmişi.

    • Tarih aralığı
    • Durum filtreleri
    • Özel biçimlendirme
    Dağıtımları aç

  • Paketler

    Sürüme göre sıralama, bağımlılık türü filtreleme, güncelleme durumu ve yeniden kullanılabilir liste/ızgara görünümleri sunan bir bağımlılık envanteri.

    • Sürüme göre sıralama
    • Güncelleme durumu
    • Liste ve ızgara
    Paketleri aç

Ortak çekirdek ve sayfaya özgü kod

Ortak çekirdek

src/features/list-page/
  • Sorgu ayrıştırma ve serileştirme
  • Arama, filtreler, sıralama ve görünümler
  • Sonuç düzeni ve sayfalama
  • Etkin filtreler
  • Seçim davranışları
  • Yüklenme, boş ve hata durumları

Sayfaya özgü yapı

src/features/issues-example/
  • Türler ve örnek veriler
  • Sorgu yapılandırması ve servisi
  • Araç çubuğu düzeni
  • Satırlar, kartlar ve sayfaya özgü sunum
  • Gerektiğinde toplu işlem davranışları

Her özellik, ortak çekirdeği değiştirmeden ihtiyaç duyduğu yapıyı onun üzerine kurar.

Net sorumluluk sınırlarıyla tasarlandı

  1. Durum URL'de — Arama, filtreler, sıralama, görünüm ve sayfalama URL üzerinden paylaşılabilir ve yeniden oluşturulabilir.
  2. Sonuçlar önce sunucuda — Sayfalar URL'yi ayrıştırır, ilgili sorgu servislerini doğrudan çağırır ve sonuçları sunucuda render eder.
  3. Odaklanmış client sınırları — Client Component'ler yalnızca etkileşimli kontrolleri, geçici seçimleri, toplu işlem durumlarını ve hata sonrası toparlanmayı yönetir.
  4. Her alan için tek sorgu akışı — Her sayfa ve ona ait mock Route Handler aynı sorgu yapılandırmasını ve servisini kullanır.
  5. Sistem durumları baştan tasarımın parçası — Yüklenme, boş sonuç, filtre sonrası boş sonuç ve hata durumları sonradan eklenen detaylar değil, mimarinin doğrudan bir parçasıdır.

Sistemi üç farklı açıdan inceleyin

  • Şablonlar

    Ortak yapı taşlarının giderek daha kapsamlı liste sayfalarına nasıl dönüştüğünü görün.

    Şablonları görüntüle

  • Yapı Taşları

    Paylaşılan bileşenleri, hook'ları, fonksiyonları, türleri, sınırları ve projede nerelerde kullanıldıklarını inceleyin.

    Yapı Taşlarını görüntüle

  • Mimari

    Bir isteğin ekrana ulaşana kadar izlediği yolu, server/client sorumluluklarını, sorgu akışını ve seçim davranışını inceleyin.

    Mimariyi görüntüle

Yalnızca ekranları değil, arkasındaki mühendislik kararlarını göstermek için geliştirildi.

Mock veriler ve Route Handler'lar projeyi bağımsız olarak çalışabilir tutar. Asıl amaç; yeniden kullanılabilir sınırları, erişilebilir etkileşimleri, responsive davranışı ve mimari kararların nedenlerini görünür kılmaktır.

Bileşenlerle başlayın