Next.Js 13 Paralel Rotalar: Kapsamlı Bir Kılavuz

1. Giriş

Selamlar!

Next.js'deki paralel rotalarla ilgili bu kapsamlı kılavuza hoş geldiniz.

Dijital ortam geliştikçe web geliştirmenin karmaşıklıkları da gelişiyor. Modern web uygulamaları, kullanıcı deneyimini geliştirmek ve karmaşık tasarım yapılarına uyum sağlamak için yalnızca sağlam değil, aynı zamanda çok yönlü yönlendirme mekanizmalarına da ihtiyaç duyar.

Bu makale Next.js 13.3 - Paralel Rotalar'da sunulan güçlü özelliği anlamak için titizlikle hazırlanmıştır.

Amaç iki yönlüdür: birincisi, paralel rotaların ve pratik uygulamalarının öneminin net bir şekilde anlaşılmasını sağlamak ve ikinci olarak, bunları Next.js projelerinizde verimli bir şekilde uygulamaya yönelik uygulamalı bilgiler sunmak.

Paralel rotaların dönüştürücü potansiyelini ve web uygulaması tasarımının sınırlarını nasıl yeniden tanımladıklarını keşfetmek için bu yolculuğa başlayalım.

2. Paralel Yollardan Önceki Dünya

Paralel rotaların başlangıcından önce, web geliştiricileri içeriği tek bir görünümde dinamik olarak nasıl yapılandırabilecekleri ve görüntüleyebilecekleri konusunda sınırlıydı. Geleneksel yönlendirme mekanizmaları oldukça doğrusaldı: tek URL, tek görünüm.

Örneğin, tipik bir gösterge tablosu tasarımını düşünün:

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

/dashboard/user konumuna gitmek Kullanıcı Kontrol Panelini oluştururken, /dashboard/team Ekip Kontrol Panelini gösterecektir. İkisi birbirini dışlıyordu. Farklı bir segmenti görüntülemek için kullanıcının genellikle mevcut görünümünden tamamen uzaklaşması gerekir.

Bu, özellikle geliştiricilerin bir web sitesinin birden fazla bölümünü aynı anda veya koşullu olarak görüntülemek istediklerinde zorluklar yarattı. Geleneksel yönlendirme yaklaşımı esneklikten yoksundu ve karmaşık durum yönetimine veya geçici çözümlere başvurmadan yan yana gösterge tabloları veya modlar gibi karmaşık, etkileşimli düzenler oluşturmayı zorlaştırıyordu.

Neyse ki Next.js gibi çerçevelerin gelişmesi ve paralel yolların kullanıma sunulmasıyla bu manzara büyük ölçüde değişti ve dinamik ve uyarlanabilir web tasarımında yeni bir çağ başlattı.

3. Paralel Rotaları Anlamak

Paralel Rotalar, Next.js 13.3'te sunulan çığır açıcı özelliklerdir ve geliştiricilerin yönlendirmeye ve web'deki içeriğin sunumuna yaklaşımını önemli ölçüde değiştirir.

3.1 Paralel Yollara Giriş:

Next.js 13.3, daha gelişmiş yönlendirme durumlarının uygulanmasına olanak tanıyan yeni bir dinamik kural getiriyor. Belgelerde belirtildiği gibi,

"Paralel Rotalar, karmaşık kontrol panelleri veya modellerde olduğu gibi, aynı görünümde birden fazla sayfayı göstermenize olanak tanır. Paralel Rotalar ile, aynı görünümde, bağımsız olarak gezinilebilen bir veya daha fazla sayfayı eş zamanlı olarak oluşturabilirsiniz."

Daha basit bir ifadeyle, uygulamanızın farklı bileşenleri veya bölümleri aynı anda yüklenebilir ve özellikle belirli bileşenlerin veri getirme veya oluşturma nedeniyle daha uzun sürmesi durumunda akıcılık ve yanıt verme hissi verir.

3.2 Kullanım Durumları: Kontrol Panelleri, Modlar ve Daha Fazlası:

Modern web uygulamalarının yapısı genellikle çeşitli görünümleri birleştiren veya temel içeriği kaybetmeden bağlamsal açılır pencereler gerektiren gelişmiş düzenler gerektirir.

Örneği belgelerden alın:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

Bu düzen, bu yeni yönlendirme yaklaşımına özgü bir özellik olan adlandırılmış "yuvalar" kullanılarak kullanıcı ve ekip kontrol panellerinin aynı görünümde aynı anda görüntülenmesi için Paralel Yolların nasıl kullanılabileceğini gösterir.

3.3 Avantajları: Çoklu Sayfa Görünümü, Koşullu İşleme, Bağımsız Gezinme:

Paralel Yolların avantajları çok çeşitlidir. Vurgulandığı gibi, aşağıdakilere izin veriyorlar:

"aynı görünümde bağımsız olarak gezinilebilen bir veya daha fazla sayfanın eşzamanlı olarak oluşturulması".

Ek olarak, sayfaların koşullu olarak oluşturulması için de kullanılabilirler, böylece web uygulamalarına benzeri görülmemiş düzeyde esneklik ve dinamizm sunarlar.

Temelde, Paralel Yolların ortaya çıkışıyla birlikte, web geliştiricileri artık modern webin gelişen ihtiyaçlarına göre tasarlanmış karmaşık, dinamik ve kullanıcı dostu web arayüzleri oluşturmak için daha iyi donanıma sahipler.

4. Paralel Rotalar Nasıl Çalışır?

Paralel Rotalar'ın derinliklerine inmek Next.js 13.3'ün ne kadar akıllıca oluşturulduğunu gösterir. Detayları adım adım inceleyelim.

4.1 "Slotlara" ve @folder Kuralına Giriş:

Paralel Rotaların kalbinde "slot" kavramı yatmaktadır. Slotları, web sitenizin farklı sayfalarını veya bölümlerini görüntüleyebilecek belirlenmiş alanlar olarak düşünün.

@folder kuralı, belgelerin notunda da belirtildiği gibi, bu yuvaları ayarlamak için kullanılan yöntemdir:

"Paralel Yollar, @folder yöntemi kullanılarak tanımlanan bu adlandırılmış 'yuvaları' kullanır."

• Kod Açıklaması:

  
  

  • Paralel Tesisatlar için Klasör Yapısı: Şu örneği düşünün:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    Burada '@kullanıcı' ve '@ekip' farklı içerikler için taşıyıcı görevi görerek web sitemizi daha esnek bir şekilde tasarlamamıza olanak tanır.

    
    

  • Düzenler Yuvaları Sahne Alanı Olarak Nasıl Kullanır: Belgelere göre, aynı rota segmentindeki düzen bu yuvaları sahne donanımı olarak kullanabilir. İşte açık bir örnek:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • Not: Yukarıdaki kodda, getCurrentUserType() işlevi kullanıcı türünü belirlemek için kullanılır; bu da user mı yoksa team yuvasının mı görüntüleneceğini belirler.

    
    

• Örtülü ve Açık Rota Yuvaları: Next.js yönlendirmenin güçlü noktalarından biri esnekliğidir. Örneğimizdeki '@user' ve '@team' tanımladığımız açık alanlardır (doğrudan @folder bağlı), ayrıca örtülü veya otomatik bir yuva da vardır.

  
  

• Belgeler şunu açıklıyor:

  " children bu tür otomatik alanlardır ve onu bir @folder ile ilişkilendirmemize gerek yoktur. Bu nedenle, dashboard/page.js dashboard/@children/page.js ile aynı işlevi görür."

Geliştiriciler, Paralel Rotaların nasıl çalıştığını iyice anlayarak Next.js 13'ün yeteneklerini optimize ederek daha sezgisel ve uyarlanabilir web siteleri oluşturabilirler.

5. Paralel Rotaların Nasıl Kullanılacağına İlişkin Adım Adım Kılavuz

5.1 Yeni Bir Next.js Uygulaması Kurma

Yeni bir Next.js uygulaması oluşturarak başlayın:

 npx create-next-app@latest parallel-routes

Yeni oluşturulan uygulamanın dizinine gidin:

 cd parallel-routes

Geliştirme sunucusunu başlatın:

 yarn dev

5.2 Uygulamanın Yapılandırılması

Proje dizininde aşağıdaki klasörleri ve dosyaları oluşturun:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Kompozisyonları Oluşturma ve Veri Yüklemeyi Simüle Etme

app/@folder1/page.js dosyasında, bileşenlerin yüklendiği görsel sırayı anlamak için yükleme süresini gösterecek ve simüle edecek bileşeni oluşturacağız:

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

Benzer şekilde, app/@folder2/page.js dosyasında:

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

Bu simüle edilmiş yükleme süreleri, paralel rotaların kapasitesini görsel olarak değerlendirmenize olanak tanır.

5.4 Yerleşim Kodunu Güncelleyin

app/layout.js dosyasında, düzen kodunu iki klasöre uyum sağlayacak şekilde ayarlayın:

Önce:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

Sonrasında:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

Daha iyi okunabilirlik için düzeni mümkün olan en iyi şekilde şekillendirmekten çekinmeyin

5.5 Yükleme Durumlarını Ekleme

Next.Js belgeleri şunları belirtir:

Özel loading.js dosyası, React Suspense ile anlamlı Yükleme Kullanıcı Arayüzü oluşturmanıza yardımcı olur. Bu kuralla, bir rota bölümünün içeriği yüklenirken sunucudan anlık yükleme durumunu gösterebilirsiniz. Oluşturma tamamlandıktan sonra yeni içerik otomatik olarak değiştirilir.

Her bileşen için (klasör1 ve klasör2) bir yükleme durumu oluşturacağız. Klasör yapınız şu şekilde olmalıdır:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. Sayfayı Değiştir

app/page.js içeriğini ayarlayın.

Bu değişiklik, ana sayfanın hiçbir şey göstermemesini sağlayarak paralel rotaların parlamasına izin verir:

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

Sorumluluk reddi beyanı

Paralel rotalarla pratik yaparken, sıcak yeniden yüklemenin rotaları beklendiği gibi göstermediğini öğrendim. Sorunu araştırmadığım için sorunun tam olarak ne olduğunu söyleyemem. Bununla karşılaşırsanız değişiklikleri yansıtmak için geliştirme sunucusunu yeniden başlatmanız yeterlidir.

Çözüm

Next.js 13.3'te tanıtılan paralel yollar, web geliştirme alanında önemli bir ilerleme kaydetti.

Geliştiriciler, başlangıçtan önce, geleneksel yönlendirmenin daha doğrusal bir deneyim sunması nedeniyle bir web sitesinin birden fazla bölümünü aynı anda görüntüleme konusunda zorluklarla karşılaşıyordu.

Next.js, paralel rotalarla dinamik web tasarımına yenilikçi bir yaklaşım sunarak birden fazla sayfanın tek bir görünümde eşzamanlı olarak oluşturulmasına olanak tanır.

Bu güçlü özellik yalnızca gelişmiş kullanıcı deneyimi sağlamakla kalmaz, aynı zamanda karmaşık düzenleri ve koşullu oluşturmaları da kolaylaştırarak çağdaş web uygulaması tasarımının sınırlarını zorlar.

Geliştiriciler yukarıda verilen ayrıntılı kılavuzu takip ederek "yuvalar" ve "@klasör" kuralı gibi temel kavramları anlamaktan Next.js çerçevesini kullanarak pratik uygulamaya kadar paralel yolların işleyişini derinlemesine inceleyebilirler.

Belirtilen sıcak yeniden yükleme sorunu gibi birkaç sorun olsa da, web uygulamalarına paralel yollardan eklenen esneklik ve dinamizm, öğrenme eğrisine değecektir.

Dijital ortam gelişmeye devam ettikçe, bunun gibi araçlar ve özellikler şüphesiz web geliştirmenin geleceğini şekillendirmede çok önemli bir rol oynayacaktır.

Sabrınız ve özveriniz için bir kez daha teşekkür ederiz.

Geri bildiriminiz veya sorularınız mı var? Paylaşmaktan çekinmeyin. Her ses değer katar.

Benimle bağlantı kurun:

dev.to topluluğu @leandro_nnz hackernoon.com topluluğu @leandronnz hashnode.com liendronnz twitter.com @digpollution

Bir dahaki sefere kadar mutlu kodlamalar!

Referanslar

Kodun tamamını buradaki repoda bulabilirsiniz.

Resmi Next.js Belgeleri burada .

Bu makaleyi oluşturmak için StackEdit'i kullandım.

Unsplash'ta Markus Spiske'nin fotoğrafı