Next.js Interception Rotaları: Modal ve Overlay Desenlerinde Uzmanlaşma

Popüler bir React framework'ü olan Next.js, performanslı ve ölçeklenebilir web uygulamaları oluşturmak için güçlü özellikler sunar. Bu özelliklerden biri olan Interception Rotaları, özellikle modal ve overlay desenlerini uygularken karmaşık yönlendirme senaryolarını ele almak için gelişmiş bir yol sağlar. Bu kapsamlı kılavuz, kusursuz ve ilgi çekici kullanıcı deneyimleri oluşturmak için Interception Rotalarından nasıl yararlanılacağını araştırmaktadır.

Interception Rotaları Nedir?

Interception Rotaları, tarayıcıdaki URL'yi değiştirmeden bir rotayı yakalamanıza ve farklı bir kullanıcı arayüzü (UI) oluşturmanıza olanak tanır. Bunu, kullanıcı deneyimini zenginleştiren geçici bir sapma olarak düşünebilirsiniz. Bu özellik özellikle şunlar için kullanışlıdır:

• Modallar: Yeni bir sayfaya gitmeden içeriği bir modal pencerede görüntüleme.
• Overlay'ler: Mevcut içeriğin üzerinde ek bilgi veya kontroller gösterme.
• Resim Galerileri: Bir resim galerisi içinde akıcı, sayfa benzeri bir gezinme deneyimi oluşturma.
• Kullanıcı Alıştırma Akışları: Tam sayfa yeniden yüklemeleri olmadan kullanıcıları çok adımlı bir süreçte yönlendirme.

Modallar ve Overlay'ler için Neden Interception Rotaları Kullanılmalı?

Modalları ve overlay'leri yönetmenin geleneksel yöntemleri genellikle bir bileşen içinde state yönetimini içerir, bu da karmaşıklaşabilir ve performans sorunlarına yol açabilir. Interception Rotaları çeşitli avantajlar sunar:

• Geliştirilmiş SEO: Modal veya overlay'de görüntülenen içerik, belirli bir rota ile ilişkilendirildiği için arama motorları tarafından hala erişilebilirdir.
• Paylaşılabilir URL'ler: Kullanıcılar modal veya overlay içeriğine doğrudan bir bağlantı paylaşabilir.
• Tarayıcı Geçmişi: Tarayıcının geri ve ileri düğmeleri beklendiği gibi çalışır ve kullanıcıların modal geçmişinde gezinmesine olanak tanır.
• Basitleştirilmiş State Yönetimi: Modal görünürlük state'ini yönetmedeki karmaşıklığın azalması, daha temiz ve bakımı daha kolay kodlara yol açar.
• Artırılmış Performans: Sadece modal içeriğini güncelleyerek gereksiz yeniden render'lardan kaçının.

Next.js'te Interception Rotalarını Kurma

Bir e-ticaret uygulamasında ürün detaylarını görüntülemek için bir modal oluşturarak Interception Rotalarını nasıl uygulayacağımızı pratik bir örnekle gösterelim.

Proje Yapısı

Öncelikle dizin yapısını tanımlayalım. Her ürünün benzersiz bir ID'ye sahip olduğu bir `products` dizinimiz olduğunu varsayalım.

app/
  products/
    [id]/
      page.js       // Ürün detayları sayfası
    @modal/
      [id]/
        page.js   // Ürün detayları için modal içeriği
    default.js  // products dizini için layout
  page.js           // Ana sayfa

Açıklama

• `app/products/[id]/page.js`: Bu, ana ürün detayları sayfasıdır.
• `app/products/@modal/[id]/page.js`: Bu, modal içeriğini render edecek olan Interception Rotasını tanımlar. `@modal` kuralına dikkat edin – bu, Next.js'in interception rotasını tanıması için çok önemlidir.
• `app/products/default.js`: Bu, `products` dizini için layout'tur. `@modal` rotasını bu layout içine sarmak gereklidir.
• `app/page.js`: Ürünlerimize bağlantılar içerecek olan ana sayfa.

Kod Uygulaması

1. Ana Sayfa (app/page.js)

Bu sayfa, her biri ürün detaylarını bir modalda açan bir bağlantıya sahip ürünlerin bir listesini görüntüler.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Laptop' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Ürün Listesi
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

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

Bu sayfa tam ürün detaylarını render eder. Gerçek dünya uygulamasında, bu bir API'den veya veritabanından veri çekerdi. Önemli olarak, orijinal ürün listesine geri bir bağlantı sağlar.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Ürün Detayları
 
Ürün ID: {id}
 
Bu, tam ürün detayları sayfasıdır.
 Ürün Listesine Geri Dön
 
 );
}

3. Modal İçeriği (app/products/@modal/[id]/page.js)

Bu en önemli kısımdır – Interception Rotası. Aynı ürün ID'sini kullanarak modal içeriğini render eder. ID'ye erişmek için `useParams` hook'una dikkat edin.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Ürün Modalı
 
Ürün ID: {id}
 
Bu içerik bir modal içinde render ediliyor!
  history.back()}>Modalı Kapat
 
 
 );
}

Not: `'use client';` yönergesi, özellikle `useParams` kullanırken istemci tarafı etkileşimi için gereklidir.

Stil (modal.module.css): Temel modal stili için basit bir CSS modülü kullanılır. Bu, modalı doğru bir şekilde konumlandırmak için çok önemlidir.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Üstte olduğundan emin olun */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Layout (app/products/default.js)

Bu layout, `@modal` rotasını sararak ürün bağlamı içinde render edilmesini sağlar.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

Nasıl Çalışır

1. Bir kullanıcı ana sayfada bir ürün bağlantısına tıkladığında (ör. `/products/1`), Next.js bunu `products` dizini içinde bir rota olarak tanır.
2. `@modal` interception rotası nedeniyle, Next.js `@modal` altında eşleşen bir rota olup olmadığını kontrol eder.
3. Eğer bir eşleşme bulunursa (ör. `/products/@modal/1`), Next.js `app/products/@modal/[id]/page.js` dosyasından gelen içeriği mevcut sayfa içinde render eder. Tarayıcıdaki URL `/products/1` olarak kalır.
4. `modalOverlay` stilleri, modalı alttaki içeriğin üzerine konumlandırır.
5. "Modalı Kapat"a tıklamak, geri gitmek için `history.back()` kullanır, bu da modalı etkili bir şekilde kapatır ve önceki duruma döner.

Gelişmiş Interception Rota Teknikleri

1. Geri Düğmesini Yönetme

Modal uygulamasının önemli bir yönü, tarayıcının geri düğmesiyle doğru davranışı sağlamaktır. Bir kullanıcı bir modal açtığında ve sonra geri düğmesine tıkladığında, ideal olarak modalı kapatmalı ve önceki bağlama dönmelidir, uygulamadan başka bir yere gitmemelidir.

Örnekte kullanılan `history.back()` yöntemi, tarayıcı geçmişinde bir adım geri giderek bu etkiyi sağlar. Ancak, daha karmaşık senaryolar için, mevcut yönlendirme durumunu dikkate alan özel bir geri düğmesi işleyicisi uygulamanız gerekebilir.

2. Dinamik Modal İçeriği

Gerçek dünya uygulamalarında, modal içeriği büyük olasılıkla ürün ID'sine göre bir API'den veya veritabanından çekilen dinamik veriler olacaktır. Gerekli verileri almak için modal bileşeni içinde `fetch` API'sini veya SWR ya da React Query gibi bir veri çekme kütüphanesini kullanabilirsiniz.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Kendi API endpoint'inizle değiştirin
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Yükleniyor...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... diğer ürün detayları ... */}
  history.back()}>Modalı Kapat
 
 );
}

3. İç İçe Modallar

Interception Rotaları, karmaşık modal iş akışları oluşturmak için iç içe kullanılabilir. Örneğin, bir kullanıcı bir ürün detayları modalı açabilir ve ardından ilgili bir ürün modalını açmak için bir düğmeye tıklayabilir. Bu, `@modal` dizini içinde ek interception rotaları oluşturarak başarılabilir.

4. 404 Hatalarını Yönetme

Bir kullanıcının geçersiz bir ürün ID'si ile bir modal URL'sine gittiği senaryoyu düşünün (ör. `/products/@modal/nonexistent`). Kullanıcı dostu bir 404 sayfası görüntülemek veya kullanıcıyı geçerli bir ürün sayfasına yönlendirmek için uygun hata yönetimini uygulamalısınız.

// app/products/@modal/[id]/page.js

// ... (bileşenin geri kalanı)

 if (!product) {
 return 
Ürün bulunamadı.
; // Veya bir 404 sayfasına yönlendirin
 }

// ... (bileşenin geri kalanı)

5. Overlay Desenleri

Örnekler modallara odaklanmış olsa da, Interception Rotaları overlay'ler için de kullanılabilir. İçeriği ortalamak yerine, overlay bir kenar çubuğu veya ekranın yanından kayan bir panel olarak görünebilir. CSS stili farklı olurdu, ancak yönlendirme mantığı aynı kalır.

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

• E-ticaret: Ürün detaylarını, alışveriş sepeti özetlerini veya ödeme akışlarını bir modal veya overlay'de görüntüleme.
• Sosyal Medya: Resim önizlemelerini, yorum bölümlerini veya kullanıcı profillerini bir modalda gösterme.
• Belge Yönetimi: Belge önizlemelerini, düzenleme araçlarını veya sürüm geçmişini bir overlay'de görüntüleme.
• Haritalama Uygulamaları: Konum detaylarını, ilgi çekici noktaları veya rota bilgilerini bir overlay'de gösterme.
• CRM Sistemleri: İletişim detaylarını, aktivite günlüklerini veya satış fırsatlarını bir modalda görüntüleme.

Örnek: Uluslararası E-ticaret Platformu Küresel bir e-ticaret sitesi hayal edin. Bir kullanıcı bir ürüne tıkladığında, detaylar bir modalda açılır. URL `/products/[product_id]` olarak değişir, bu da doğrudan bağlantı ve SEO faydaları sağlar. Kullanıcı modal sayfasında dili değiştirirse (örneğin, İngilizce'den İspanyolca'ya), ürün detayları seçilen dilde getirilir ve modal içeriği sorunsuz bir şekilde güncellenir. Ayrıca, site (izinle) kullanıcının konumunu tespit edebilir ve kendi bölgeleriyle ilgili kargo bilgilerini modal içinde görüntüleyebilir.

Interception Rotalarını Kullanmak için En İyi Uygulamalar

• Modal İçeriğini Kısa Tutun: Modalı çok fazla bilgiyle aşırı yüklemekten kaçının. Temel detayları sunmaya odaklanın.
• Açık Navigasyon Sağlayın: Kullanıcıların modalı kolayca kapatıp önceki bağlama dönebildiğinden emin olun.
• Mobil için Optimize Edin: Modal düzenini daha küçük ekranlarda duyarlı ve kullanıcı dostu olacak şekilde tasarlayın.
• Kapsamlı Test Edin: Tutarlı bir deneyim sağlamak için modal davranışını farklı tarayıcılarda ve cihazlarda test edin.
• Erişilebilirliği Göz Önünde Bulundurun: Modalı engelli kullanıcılar için erişilebilir kılmak için uygun ARIA niteliklerini ve klavye navigasyonunu uygulayın.

Interception Rotalarına Alternatifler

Interception Rotaları modal ve overlay desenleri için güçlü bir çözüm sunsa da, diğer yaklaşımlar da düşünülebilir:

• Geleneksel State Yönetimi: Modal görünürlüğünü kontrol etmek için React'in `useState` hook'unu veya Redux veya Zustand gibi bir state yönetimi kütüphanesini kullanmak. Bu, çok temel modal uygulamaları için daha basittir, ancak ölçekte yönetimi zorlaşır.
• Üçüncü Taraf Modal Kütüphaneleri: React Modal veya Material UI gibi kütüphanelerden önceden oluşturulmuş modal bileşenlerini kullanmak. Bunlar hızlı bir çözüm sağlayabilir ancak özelleştirme seçeneklerini sınırlayabilir.
• İstemci Tarafı Yönlendirme Kütüphaneleri: React Router gibi kütüphaneler istemci tarafı yönlendirmeyi ve modal görünürlüğünü yönetmek için kullanılabilir.

Sonuç

Next.js Interception Rotaları, web uygulamalarınızda modal ve overlay desenlerini uygulamak için sağlam ve zarif bir yol sunar. Bu güçlü özellikten yararlanarak, kusursuz, SEO dostu ve kullanıcı dostu deneyimler oluşturabilirsiniz. Alternatif yaklaşımlar mevcut olsa da, Interception Rotaları benzersiz bir fayda kombinasyonu sunarak her Next.js geliştiricisinin cephaneliğinde değerli bir araç haline gelir.

Ek Kaynaklar

• Next.js Interception Rotaları Dokümantasyonu
• React Dokümantasyonu