Next.js'te Eksik Bir default.tsx, Parallel Route Olarak Tamamen Alakasız Sayfaları 404 Yapabilir

Tek bir dosyalık eksiklik alakasız sayfaları bozuyor

Anas Sheikh'in dev.to'daki yazısı, birçok geliştiriciyi hazırlıksız yakalayan bir Next.js App Router hata modunu belgeliyor: @modal gibi bir parallel route slot'ı ekleyip default.tsx yedek dosyasını eklemeyi unuttuğunuzda, Next.js eşleşmeyen URL'lerde o slot'ı boş render etmiyor. Bunun yerine, slot'la hiçbir bağı olmayan sayfalar dahil, sayfanın tamamı için 404 döndürüyor.

Hata nasıl ortaya çıkıyor

Parallel route'lar, tek bir layout'un birden fazla sayfayı yan yana render etmesini sağlar; her biri kendi adlandırılmış slot'ındadır. Popüler bir desen, bunları intercepting route'larla birlikte modalları göstermek için kullanır: bir @modal slot'ı, intercepted route için bir sayfa tutar — örneğin (.)photo/[id]/page.tsx — ana slot ise altta fotoğraf sayfasını render eder.

Yazının da açıkladığı gibi sorun kapsam ile ilgilidir. Root layout'ta tanımlanan bir slot, yalnızca kendisi için yazıldığı fotoğraf route'larında değil, o layout'un render ettiği her route'ta yer alır. Bir ziyaretçi /settings adresine gittiğinde Next.js, @modal'in o URL'de ne render edeceğine karar vermek zorundadır. Slot içinde /settings ile eşleşen bir page.tsx ve geri dönülecek bir default.tsx yoksa, framework slot için içeriğe sahip olamaz ve boş bir slot yerine sayfanın tamamı için 404 döndürür.

Bu hatanın izini sürmek neden zor

Yazara göre modal deseni kendisi tam olarak tasarlandığı gibi çalışmaya devam eder: grid'den bir fotoğrafa tıklamak modalı açar, yenileme ise tam sayfayı getirir. Bozulan route, fotoğraf ve modal koduyla tamamen alakasız görünen bir route'tur. Settings sayfasının içinde hiçbir şey neden işaret etmez, çünkü asıl sorun layout seviyesindeki parallel-route yapılandırmasındadır, hata veren sayfadan farklı dosyalarda.

Yazı ayrıca bu boşluğun özelliği öğrenirken gözden kaçırılmasının kolay olduğunu savunuyor. Intercepting-route örneklerinin çoğu yalnızca demosunun doğru şekilde kurduğu iki üç route arasında gezinir; böylece eksiklik, biri örneğin dışındaki bir route'u ziyaret edene dek görünmez kalır — ki bu tam olarak bir production uygulamasında bolca bulunan route türüdür.

Çözüm tek küçük bir dosya

Çare, null döndüren bir component export eden app/@modal/default.tsx dosyasıdır:

tsx // app/@modal/default.tsx export default function Default() { return null; }

Yazıya göre default.tsx, mevcut route slot içinde daha spesifik hiçbir şeyle eşleşmediğinde slot'un ne render edeceğini tanımlar. Null döndürmek bilinçlidir: modal gösterilmeyen her route'ta slot hiçbir katkı yapmamalıdır ve yedek dosya, bunu ele alınmamış bir boşluk yerine açık, tanımlı bir davranışa dönüştürür.

Yazarın belirttiği daha geniş kural: bir slot, slot'un özel içeriği olmayan route'ları da render eden bir layout içinde yaşadığı anda, istisnasız her parallel route slot'ının bir default.tsx'e ihtiyacı vardır. Tek bir etkileşim — bir modal veya bir sidebar varyantı — etrafında kurulan bir slot, doğası gereği sitenin tüm route seti boyunca istisnadır; dolayısıyla yedek dosya aslında nadir bir kenar durumu değil, çoğunluk durumunu kapsar.

Yazı, mevcut projeler için kısa bir denetim komutu içeriyor:

find app -type d -name "@*"

Bu komutun bulduğu her slot dizini için, doğrudan içinde bir default.tsx bulunduğunu doğrulayın. Bir tanesi eksikse, o layout'un kapsamındaki ve slot'un özellikle ele almadığı herhangi bir route, biri oraya gitmeye çalıştığında tam bir 404 riski taşır. Yazar, artık herhangi bir projeye parallel slot eklerken ilk dosya olarak default.tsx oluşturduğunu yazıyor; çünkü tek küçük bir dosya, production'a ulaştığında teşhisi acı verici olan bir hatayı önlüyor.

Neden önemli

Parallel route'lar amiral gemisi bir App Router yeteneğidir ve üzerinde kurulu modal-interception deseni eğitim içeriklerinde, starter şablonlarda ve müşteri işlerinde her yerde karşımıza çıkar. Bu hata modu, zararsız görünen bir eksikliği, özellikle alakasız görünen route'larda site geneli 404'lere dönüştürüyor ve ancak gerçek bir kullanıcı o route'lara denk geldiğinde kendini gösteriyor. Next.js uygulaması yayınlayan ekipler, tek satırlık bir shell denetimi ve tek dosyalık bir kural ile bu hata sınıfının tamamını kapatabilir. Daha geniş anlamda bu, App Router'da layout seviyesindeki yapılandırmanın sayfa seviyesinde sonuçlar doğurduğunun bir hatırlatıcısıdır — ne type system ne de tipik bir demo odaklı geliştirme akışı bu bağlantıyı erken fark ettirmez.