Next.js Paralel Rotalar: Dinamik Sayfa Düzenleri Oluşturma

Önde gelen bir React çerçevesi olan Next.js, geliştiricilere modern web uygulamaları oluşturmak için güçlü araçlar sağlamak için sürekli gelişiyor. Son sürümlerde tanıtılan en heyecan verici özelliklerden biri Paralel Rotalar'dır. Bu özellik, uygulamanızın yapısı ve kullanıcı deneyimi üzerinde benzersiz esneklik ve kontrol sunarak aynı sayfa düzeninde birden fazla bağımsız bölümü oluşturmanıza olanak tanır.

Paralel Rotalar Nedir?

Geleneksel olarak, Next.js'deki bir rota tek bir sayfa bileşenine karşılık gelir. Farklı bir rotaya gittiğinizde, tüm sayfa yeniden oluşturulur. Paralel Rotalar, her biri kendi bağımsız rota segmenti tarafından yönetilen, aynı düzen içinde aynı anda birden fazla bileşeni oluşturmanıza olanak tanıyarak bu paradigmayı bozar. Sayfanızı, her biri kendi URL'sine ve yaşam döngüsüne sahip, tek bir ekranda bir arada var olan farklı bölümlere ayırmak gibi düşünün.

Bu, daha karmaşık ve dinamik kullanıcı arayüzleri oluşturmak için birçok olanak sunar. Örneğin, paralel rotaları şunları yapmak için kullanabilirsiniz:

• Ana içerikle birlikte kalıcı bir gezinme çubuğu görüntüleyin.
• Ana sayfa akışını etkilemeden modal pencereler veya kenar çubukları uygulayın.
• Ayrı olarak yüklenebilen ve güncellenebilen bağımsız widget'larla panolar oluşturun.
• Genel sayfa yapısını etkilemeden bir bileşenin farklı versiyonlarını A/B testi yapın.

Kavramı Anlamak: Yuvalar

Paralel Rotaların arkasındaki temel kavram, "yuvalar" kavramıdır. Bir yuva, belirli bir rota segmentinin oluşturulduğu düzeninizdeki adlandırılmış bir alandır. Bu yuvaları, yuva adının ardından @ sembolünü kullanarak app dizininizde tanımlarsınız. Örneğin, @sidebar "sidebar" adlı bir yuvayı temsil eder.

Daha sonra her yuva bir rota segmentiyle ilişkilendirilebilir. Kullanıcı belirli bir rotaya gittiğinde, Next.js, bu rota segmentiyle ilişkili bileşeni, düzenin karşılık gelen yuvasına oluşturacaktır.

Uygulama: Pratik Bir Örnek

Paralel Rotaların nasıl çalıştığını pratik bir örnekle gösterelim. Bir e-ticaret uygulaması oluşturduğunuzu ve kalıcı bir alışveriş sepeti kenar çubuğu ile birlikte bir ürün detayları sayfası görüntülemek istediğinizi düşünün.

1. Dizin Yapısı

İlk olarak, uygulamamız için dizin yapısını tanımlayalım:

app/
  ürün/
    [id]/
      @sepet/
        page.js  // Alışveriş sepeti bileşeni
      page.js      // Ürün detayları bileşeni
    layout.js   // Ürün düzeni
  layout.js     // Kök düzen

İşte her dosyanın neyi temsil ettiği:

• app/layout.js: Tüm uygulama için kök düzen.
• app/ürün/[id]/layout.js: Ürün detayları sayfasına özgü bir düzen. Yuvalarımızı burada tanımlayacağız.
• app/ürün/[id]/page.js: Ana ürün detayları bileşeni.
• app/ürün/[id]/@sepet/page.js: @sepet yuvasında oluşturulacak olan alışveriş sepeti bileşeni.

2. Kök Düzeni (app/layout.js)

Kök düzen genellikle başlıklar ve altbilgiler gibi tüm uygulama genelinde paylaşılan öğeleri içerir.

// app/layout.js
export default function KökDüzen({ çocuklar }) {
  return (
    
      
        
E-ticaret Uygulamam
        {çocuklar}
        
      
    
  );
}

3. Ürün Düzeni (app/ürün/[id]/layout.js)

Bu, yuvalarımızı tanımladığımız önemli kısımdır. Ana ürün sayfası ve sepet için, sırasıyla page.js ve @sepet/page.js'ye karşılık gelen bileşenleri özellik olarak alırız.

// app/ürün/[id]/layout.js
export default function ÜrünDüzeni({ çocuklar, sepet }) {
  return (
    

      
{çocuklar}
      
    
  );
}

Bu örnekte, ana ürün içeriğini ve sepet kenar çubuğunu yan yana konumlandırmak için basit bir flexbox düzeni kullanıyoruz. çocuklar özelliği, app/ürün/[id]/page.js'nin oluşturulmuş çıktısını ve sepet özelliği, app/ürün/[id]/@sepet/page.js'nin oluşturulmuş çıktısını içerecektir.

4. Ürün Detayları Sayfası (app/ürün/[id]/page.js)

Bu, id parametresine göre ürün detaylarını görüntüleyen standart bir dinamik rota sayfasıdır.

// app/ürün/[id]/page.js
export default async function ÜrünDetayları({ params }) {
  const { id } = params;
  // Ürün verilerini ID'ye göre getir
  const ürün = await fetchÜrün(id);

  return (
    

      
Ürün Detayları
      
{ürün.adı}
      
{ürün.açıklaması}
      
Fiyat: ${ürün.fiyatı}
    
  );
}

async function fetchÜrün(id) {
  // Gerçek veri getirme mantığınızla değiştirin
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, adı: `Ürün ${id}`, açıklaması: `Ürün ${id} açıklaması`, fiyatı: 99.99 });
  }, 500));
}

5. Alışveriş Sepeti Bileşeni (app/ürün/[id]/@sepet/page.js)

Bu bileşen, @sepet yuvasında oluşturulacak olan alışveriş sepetini temsil eder.

// app/ürün/[id]/@sepet/page.js
export default function AlışverişSepeti() {
  return (
    

      
Alışveriş Sepeti
      
Sepetteki ürünler: 3
      Ödeme
    
  );
}

Açıklama

Bir kullanıcı /ürün/123 adresine gittiğinde, Next.js şunları yapacaktır:

1. Kök düzeni (app/layout.js) oluşturun.
2. Ürün düzenini (app/ürün/[id]/layout.js) oluşturun.
3. Ürün düzeninde, ürün detayları bileşenini (app/ürün/[id]/page.js) çocuklar özelliğine oluşturun.
4. Aynı anda, alışveriş sepeti bileşenini (app/ürün/[id]/@sepet/page.js) sepet özelliğine oluşturun.

Sonuç, tek bir düzen içinde oluşturulmuş, kalıcı bir alışveriş sepeti kenar çubuğu olan bir ürün detayları sayfasıdır.

Paralel Rotaları Kullanmanın Faydaları

• Geliştirilmiş Kullanıcı Deneyimi: Kalıcı öğeler ve dinamik bölümlerle daha etkileşimli ve ilgi çekici kullanıcı arayüzleri oluşturun.
• Artırılmış Kod Yeniden Kullanılabilirliği: Bileşenleri ve düzenleri farklı rotalarda daha kolay paylaşın.
• Geliştirilmiş Performans: Sayfanın bölümlerini bağımsız olarak yükleyin ve güncelleyin, tam sayfa yeniden oluşturma ihtiyacını azaltın.
• Basitleştirilmiş Geliştirme: Daha modüler ve organize bir yapıyla karmaşık düzenleri ve etkileşimleri yönetin.
• A/B Test Yetenekleri: Tüm sayfayı etkilemeden belirli sayfa bölümlerinin farklı varyasyonlarını kolayca test edin.

Dikkat Edilmesi Gerekenler ve En İyi Uygulamalar

• Rota Çatışmaları: Paralel rotalar arasında rota çatışmalarından kaçınmaya dikkat edin. Her rota segmenti benzersiz bir amaca sahip olmalı ve diğer segmentlerle çakışmamalıdır.
• Düzen Karmaşıklığı: Paralel rotalar esneklik sunarken, aşırı kullanım, bakımı zor olan karmaşık düzenlere yol açabilir. Esneklik ve basitlik arasında bir denge kurmaya çalışın.
• SEO Etkileri: Farklı yuvalardaki içerik önemli ölçüde farklıysa, paralel rotalar kullanmanın SEO etkilerini göz önünde bulundurun. Arama motorlarının içeriği düzgün bir şekilde tarayabilmesini ve dizine ekleyebilmesini sağlayın. Uygun şekilde kanonik URL'ler kullanın.
• Veri Getirme: Özellikle birden fazla bağımsız bölümle uğraşırken veri getirmeyi dikkatli yönetin. Gereksiz isteklerden kaçınmak için paylaşılan veri depolarını veya önbellekleme mekanizmalarını kullanmayı düşünün.
• Erişilebilirlik: Paralel rota uygulamanızın engelliler de dahil olmak üzere tüm kullanıcılar için erişilebilir olduğundan emin olun. İyi bir kullanıcı deneyimi sağlamak için uygun ARIA özniteliklerini ve semantik HTML'yi kullanın.

Gelişmiş Kullanım: Koşullu Oluşturma ve Dinamik Yuvalar

Paralel rotalar statik yuva tanımlamalarıyla sınırlı değildir. Daha da esnek düzenler oluşturmak için koşullu oluşturma ve dinamik yuvalar da kullanabilirsiniz.

Koşullu Oluşturma

Bir yuvada, kullanıcı rollerine, kimlik doğrulama durumuna veya diğer faktörlere bağlı olarak farklı bileşenleri koşullu olarak oluşturabilirsiniz.

// app/ürün/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ÜrünDüzeni({ çocuklar, sepet }) {
  const kullanıcıRolü = await getUserRole();

  return (
    

      
{çocuklar}
      
    
  );
}

function YöneticiPaneli() {
  return (
    

      
Yönetici Paneli
      
Ürün detaylarını buradan yönetin.
    
  );
}

Bu örnekte, kullanıcı 'yönetici' rolüne sahipse, @sepet yuvasında alışveriş sepeti yerine bir YöneticiPaneli bileşeni oluşturulacaktır.

Dinamik Yuvalar

Daha az yaygın olsa da, teorik olarak yuva adlarını dinamik olarak oluşturabilirsiniz, ancak bu genellikle karmaşıklık ve potansiyel performans etkileri nedeniyle önerilmez. Önceden tanımlanmış ve iyi anlaşılmış yuvalara bağlı kalmak daha iyidir. Dinamik "yuvalara" ihtiyaç duyulursa, özelliklere ve koşullu oluşturmaya sahip standart React bileşenlerini kullanmak gibi alternatif çözümler düşünün.

Gerçek Dünya Örnekleri ve Kullanım Alanları

Paralel rotaların farklı uygulama türlerinde nasıl kullanılabileceğine dair bazı gerçek dünya örneklerini inceleyelim:

• E-ticaret Platformları: Ürün detayları veya kategori sayfalarının yanında bir alışveriş sepeti, öneriler veya kullanıcı hesap bilgilerini görüntüleme.
• Panolar: Metrikleri, grafikleri ve raporları görüntülemek için bağımsız widget'larla panolar oluşturma. Her widget, tüm panoyu etkilemeden ayrı olarak yüklenebilir ve güncellenebilir. Bir satış panosu, coğrafi verileri bir paralel rotada ve ürün performansını diğerinde gösterebilir, bu da kullanıcının tam bir sayfa yenilemesi olmadan ne gördüğünü özelleştirmesine olanak tanır.
• Sosyal Medya Uygulamaları: Ana akış veya profil sayfalarının yanında bir sohbet kenar çubuğu veya bildirim paneli gösterme.
• İçerik Yönetim Sistemleri (CMS): Düzenlenmekte olan içeriğin yanında bir önizleme bölmesi veya düzenleme araçları sağlama. Bir paralel rota, yapılan değişiklikler anında güncellenerek yazılan makalenin canlı bir önizlemesini görüntüleyebilir.
• Öğrenme Platformları: İlerleme takibi veya sosyal etkileşim özelliklerinin yanında kurs materyallerini görüntüleme.
• Finansal Uygulamalar: Haber veya analiz makalelerinin yanında gerçek zamanlı hisse senedi fiyatlarını veya portföy özetlerini görüntüleme. Paralel rotaları kullanan bir finansal haber web sitesinin, kullanıcılara finansal ortamın kapsamlı bir görünümünü sunarak, son dakika haber hikayelerinin yanında canlı piyasa verilerini görüntülediğini hayal edin.
• Global İşbirliği Araçları: Kalıcı video konferans veya sohbet panelleri ile belgelerin veya kodun aynı anda düzenlenmesine izin verme. San Francisco, Londra ve Tokyo'daki dağıtılmış bir mühendislik ekibi, zaman dilimleri arasında kesintisiz işbirliğini teşvik ederek, tasarım belgesi üzerinde gerçek zamanlı olarak çalışmak ve bir video görüşmesini kalıcı olarak bir kenar çubuğunda görüntülemek için paralel rotaları kullanabilir.

Sonuç

Next.js Paralel Rotalar, dinamik ve esnek web uygulamaları oluşturmak için yeni bir olasılıklar dünyasının kapılarını açan güçlü bir özelliktir. Aynı sayfa düzeninde birden fazla bağımsız bölüm oluşturmanıza izin vererek, paralel rotalar daha ilgi çekici kullanıcı deneyimleri oluşturmanıza, kod yeniden kullanılabilirliğini artırmanıza ve geliştirme sürecini basitleştirmenize olanak tanır. Potansiyel karmaşıklıkları göz önünde bulundurmak ve en iyi uygulamaları izlemek önemlidir, ancak paralel rotalarda ustalaşmak, Next.js geliştirme becerilerinizi önemli ölçüde geliştirebilir ve gerçekten yenilikçi web uygulamaları oluşturmanıza olanak tanır.

Next.js gelişmeye devam ettikçe, Paralel Rotalar, web üzerinde nelerin mümkün olduğunun sınırlarını zorlamak isteyen geliştiriciler için şüphesiz giderek daha önemli bir araç haline gelecektir. Bu kılavuzda özetlenen kavramları deneyin ve Paralel Rotaların modern web uygulamaları oluşturma yaklaşımınızı nasıl değiştirebileceğini keşfedin.