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>; }    konumuna gitmek Kullanıcı Kontrol Panelini oluştururken,   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. /dashboard/user /dashboard/team  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.    kuralı, belgelerin notunda da belirtildiği gibi, bu yuvaları ayarlamak için kullanılan yöntemdir: @folder  "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} </> ); }      işlevi kullanıcı türünü belirlemek için kullanılır; bu da   mı yoksa   yuvasının mı görüntüleneceğini belirler. Not: Yukarıdaki kodda, getCurrentUserType() user team  Ö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   bağlı), ayrıca örtülü veya otomatik bir yuva da vardır. @folder  Belgeler şunu açıklıyor:  "   bu tür otomatik alanlardır ve onu bir   ile ilişkilendirmemize gerek yoktur. Bu nedenle,     ile aynı işlevi görür." children @folder dashboard/page.js dashboard/@children/page.js  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    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: app/@folder1/page.js   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,   dosyasında: app/@folder2/page.js   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    dosyasında, düzen kodunu iki klasöre uyum sağlayacak şekilde ayarlayın: app/layout.js   Ö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    şunları belirtir: Next.Js belgeleri  Özel   dosyası,   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   gösterebilirsiniz. Oluşturma tamamlandıktan sonra yeni içerik otomatik olarak değiştirilir. loading.js React Suspense anlık yükleme durumunu  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    içeriğini ayarlayın. app/page.js  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:    topluluğu     topluluğu          dev.to @leandro_nnz hackernoon.com @leandronnz hashnode.com liendronnz twitter.com @digpollution   Bir dahaki sefere kadar mutlu kodlamalar!  Referanslar  Kodun tamamını   repoda bulabilirsiniz. buradaki  Resmi Next.js Belgeleri   . burada  Bu makaleyi oluşturmak için   kullandım. StackEdit'i      fotoğrafı Unsplash'ta Markus Spiske'nin

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps