Routing Fundamentals

Her uygulamanın iskeleti yönlendirmedir. Bu sayfa size web için yönlendirmenin temel kavramlarını ve Next.js'de yönlendirmenin nasıl ele alınacağını tanıtacaktır.

Terminology

Öncelikle, bu terimlerin dokümantasyon boyunca kullanıldığını göreceksiniz. İşte hızlı bir referans:

• Ağaç: Hiyerarşik bir yapıyı görselleştirmek için kullanılan bir kural. Örneğin, üst ve alt bileşenleri olan bir bileşen ağacı, bir klasör yapısı vb.
• Alt ağaç: Yeni bir kökten (ilk) başlayan ve yapraklarda (son) biten bir ağacın parçası.
• Kök: Kök düzeni gibi bir ağaç veya alt ağaçtaki ilk düğüm.
• Yaprak: Bir URL yolundaki son segment gibi, bir alt ağaçta çocuğu olmayan düğümler.

• URL Segmenti: URL yolunun eğik çizgilerle ayrılmış bölümü.
• URL Yolu: URL'nin etki alanından sonra gelen kısmı (segmentlerden oluşur).

The app Router

Next.js, 13. sürümde React Sunucu Bileşenleri üzerine inşa edilen ve paylaşılan düzenleri, iç içe yönlendirmeyi, yükleme durumlarını, hata işlemeyi ve daha fazlasını destekleyen yeni bir Uygulama Yön lendiricisi sundu.

Uygulama Yönlendirici, app adlı yeni bir dizinde çalışır. app dizini, kademeli uyarlamaya izin vermek için pages dizini ile birlikte çalışır. Bu, önceki davranış için pages dizinindeki diğer rotaları tutarken uygulamanızın bazı rotalarını yeni davranışa seçmenize olanak tanır. Uygulamanız pages dizinini kullanıyorsa, lütfen Pages Router belgelerine de bakın.

Bilmekte fayda var: Uygulama Yönlendiricisi, Sayfa Yönlendiricisine göre önceliklidir. Dizinler arasındaki yönlendirmeler aynı URL yoluna çözümlenmemelidir ve bir çakışmayı önlemek için derleme zamanı hatasına neden olur.

Varsayılan olarak, app içindeki bileşenler React Sunucu Bileşenleridir. Bu bir performans optimizasyonudur ve bunları kolayca benimsemenizi sağlar ve İstemci Bileşenlerini de kullanabilirsiniz.

Öneri: Sunucu Bileşenleri konusunda yeniyseniz Sunucu sayfasına göz atın.

Roles of Folders and Files

Next.js dosya sistemi tabanlı bir yönlendirici kullanır:

• Klasörler rotaları tanımlamak için kullanılır. Rota, kök klasörden page.js dosyasını içeren son yaprak klasöre kadar dosya sistemi hiyerarşisini takip eden, iç içe geçmiş klasörlerden oluşan tek bir yoldur. Rotaları Tanımlama bölümüne bakın.
• Dosyalar, bir rota segmenti için gösterilen kullanıcı arayüzünü oluşturmak için kullanılır. Özel dosyalar bölümüne bakın.

Route Segments

Bir rotadaki her klasör bir rota segmentini temsil eder. Her rota segmenti, bir URL yolundaki karşılık gelen segmentle eşlenir.

Nested Routes

İç içe bir rota oluşturmak için klasörleri birbirinin içine yerleştirebilirsiniz. Örneğin, app dizininde iki yeni klasörü iç içe geçirerek yeni bir /dashboard/settings rotası ekleyebilirsiniz.

/dashboard/settings rotası üç segmentten oluşmaktadır:

• / (Kök segment)
• dashboard (Segment)
• settings (Yaprak segmenti)

File Conventions

Next.js, iç içe rotalarda belirli davranışlara sahip kullanıcı arayüzü oluşturmak için bir dizi özel dosya sağlar:

Bilmekte fayda var: .js, .jsx veya .tsx dosya uzantıları özel dosyalar için kullanılabilir.

Component Hierarchy

Bir rota segmentinin özel dosyalarında tanımlanan React bileşenleri belirli bir hiyerarşi içinde oluşturulur:

• layout.js
• template.js
• error.js (React hata sınırı)
• loading.js (React gerilim sınırı)
• not-found.js (React hata sınırı)
• page.js veya iç içe layout.js

İç içe geçmiş bir rotada, bir segmentin bileşenleri üst segmentinin bileşenlerinin içinde iç içe geçecektir.

Colocation

Özel dosyalara ek olarak, kendi dosyalarınızı (örneğin bileşenler, stiller, testler, vb.) app dizinindeki klasörlerin içine yerleştirme seçeneğiniz vardır.

Bunun nedeni, klasörler rotaları tanımlarken, yalnızca page.js veya route.js tarafından döndürülen içeriklerin herkese açık olarak adreslenebilir olmasıdır.

Proje Organizasyonu ve Ortak Yerleşim hakkında daha fazla bilgi edinin.

Advanced Routing Patterns

App Router ayrıca daha gelişmiş yönlendirme modellerini uygulamanıza yardımcı olacak bir dizi kural sunar. Bunlar şunları içerir:

• Paralel Rotalar: Aynı görünümde bağımsız olarak gezinilebilen iki veya daha fazla sayfayı aynı anda göstermenizi sağlar. Bunları, kendi alt navigasyonları olan bölünmüş görünümler için kullanabilirsiniz. Örn. Gösterge Tabloları.
• Rotaları Yakalama: Bir rotayı kesmenize ve başka bir rota bağlamında göstermenize izin verir. Geçerli sayfanın bağlamını korumak önemli olduğunda bunları kullanabilirsiniz. Örneğin, bir görevi düzenlerken tüm görevleri görmek veya bir akıştaki bir fotoğrafı genişletmek.

Bu kalıplar daha zengin ve daha karmaşık kullanıcı arayüzleri oluşturmanıza olanak tanıyarak, geçmişte küçük ekipler ve bireysel geliştiriciler tarafından uygulanması karmaşık olan özellikleri demokratikleştirir.

Next Steps

Artık Next.js'de yönlendirmenin temellerini anladığınıza göre, ilk rotalarınızı oluşturmak için aşağıdaki bağlantıları takip edin: