Proje Organizasyonu ve Dosya Kolokasyonu (Project Organization and File Colocation)
Last updated
Last updated
Yönlendirme klasörü ve dosya kurallarının yanı sıra Next.js, proje dosyalarınızı nasıl düzenlediğiniz ve konumlandırdığınız konusunda görüş bildirmez.
app dizininde, iç içe klasör hiyerarşisi rota yapısını tanımlar.
Her klasör, URL yolunda karşılık gelen bir segmentle eşlenen bir rota segmentini temsil eder.
Ancak, rota yapısı klasörler aracılığıyla tanımlansa da, bir rota segmentine bir page.js veya route.js dosyası eklenene kadar bir rota genel olarak erişilebilir değildir.
Ve bir rota genel erişime açık hale getirildiğinde bile, istemciye yalnızca page.js veya route.js tarafından döndürülen içerik gönderilir.
Bu, proje dosyalarının yanlışlıkla yönlendirilebilir olmadan app dizinindeki rota segmentlerinin içine güvenli bir şekilde yerleştirilebileceği anlamına gelir.
Bilmekte fayda var:
Bu, sayfalardaki herhangi bir dosyanın bir rota olarak kabul edildiği pages dizininden farklıdır.
Proje dosyalarınızı app dizinine yerleştirebilirsiniz ancak bunu yapmak zorunda değilsiniz. Tercih ederseniz, bunları app dizininin dışında tutabilirsiniz.
Next.js, projenizi düzenlemenize yardımcı olacak çeşitli özellikler sunar.
### Özel Klasörler
Özel klasörler, bir klasörün önüne alt çizgi getirilerek oluşturulabilir: _folderName
Bu, klasörün özel bir uygulama ayrıntısı olduğunu ve yönlendirme sistemi tarafından dikkate alınmaması gerektiğini gösterir, böylece klasör ve tüm alt klasörleri yönlendirme dışında bırakılır.
app dizinindeki dosyalar varsayılan olarak güvenli bir şekilde ortak konumlandırılabildiğinden, özel klasörler ortak konumlandırma için gerekli değildir. Ancak, şunlar için yararlı olabilirler:
UI mantığını yönlendirme mantığından ayırma.
Dahili dosyaları bir proje ve Next.js ekosistemi genelinde tutarlı bir şekilde düzenleme.
Kod düzenleyicilerde dosyaları sıralama ve gruplama.
Gelecekteki Next.js dosya kurallarıyla olası adlandırma çakışmalarını önleme.
Bilmekte fayda var:
Bir çatı kuralı olmamakla birlikte, özel klasörlerin dışındaki dosyaları da aynı alt çizgi kalıbını kullanarak "private" olarak işaretlemeyi düşünebilirsiniz.
Klasör adının önüne %5F (alt çizginin URL ile kodlanmış biçimi) ekleyerek alt çizgi ile başlayan URL segmentleri oluşturabilirsiniz: %5FfolderName.
Özel klasörler kullanmıyorsanız, beklenmedik adlandırma çakışmalarını önlemek için Next.js özel dosya kurallarını bilmek yararlı olacaktır.
Rota grupları bir klasör parantez içine alınarak oluşturulabilir: (folderName)
Bu, klasörün organizasyonel amaçlar için olduğunu ve rotanın URL yoluna dahil edilmemesi gerektiğini gösterir.
Rota grupları şunlar için kullanışlıdır:
Rotaları gruplar halinde düzenleme, örneğin site bölümüne, amaca veya ekibe göre.
Aynı rota segmenti düzeyinde iç içe düzenleri etkinleştirme:
Birden fazla kök düzen dahil olmak üzere aynı segmentte birden fazla iç içe düzen oluşturma
Ortak bir segmentteki rotaların alt kümesine bir düzen ekleme
src DiziniNext.js, uygulama kodunun (app dahil) isteğe bağlı bir src dizini içinde saklanmasını destekler. Bu, uygulama kodunu çoğunlukla bir projenin kök dizininde bulunan proje yapılandırma dosyalarından ayırır.
Next.js, derinlemesine iç içe geçmiş proje dosyalarında içe aktarmaları okumayı ve sürdürmeyi kolaylaştıran Modül Yolu Takma Adlarını destekler.
Bir Next.js projesinde kendi dosyalarınızı ve klasörlerinizi düzenlemek söz konusu olduğunda "doğru" veya "yanlış" bir yol yoktur.
Aşağıdaki bölüm, yaygın stratejilerin çok üst düzey bir özetini listelemektedir. En basit çıkarım, sizin ve ekibiniz için işe yarayan bir strateji seçmek ve proje genelinde tutarlı olmaktır.
Bilmekte fayda var: Aşağıdaki örneklerimizde, components ve lib klasörlerini genelleştirilmiş yer tutucular olarak kullanıyoruz, bunların adlandırılmasının özel bir çerçeve önemi yoktur ve projeleriniz ui, utils, hooks, styles vb. gibi başka klasörler kullanabilir.
app dışında saklamaBu strateji, tüm uygulama kodunu projenizin kök dizinindeki paylaşılan klasörlerde saklar ve app dizinini yalnızca yönlendirme amacıyla tutar.
app içindeki üst düzey klasörlerde saklayınBu strateji, tüm uygulama kodunu app dizininin kök dizinindeki paylaşılan klasörlerde saklar.
Bu strateji, genel olarak paylaşılan uygulama kodunu kök app dizininde depolar ve daha spesifik uygulama kodunu bunları kullanan rota segmentlerine böler.
