M

MLOG

Türkçe

Next.js Interception Rotalarına derinlemesine bir bakış, gelişmiş kullanıcı deneyimleri için pratik modal ve overlay uygulama stratejileri.

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 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:

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

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ı

Ö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

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:

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