Proje Organizasyonu ve Dosya Kolokasyonu (Project Organization and File Colocation)

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.

Varsayılan olarak güvenli ortak yerleşim (Safe colocation by default)

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.

Proje organizasyon özellikleri (Project organization features)

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ı (Route Groups)

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 Dizini

Next.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.

Modül Yolu Takma Adları (Module Path Aliases)

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.

// önce
import { Button } from "../../../components/button";

// sonra
import { Button } from "@/components/button";

Proje organizasyon stratejileri (Project organization strategies)

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.

Proje dosyalarını app dışında saklama

Bu strateji, tüm uygulama kodunu projenizin kök dizinindeki paylaşılan klasörlerde saklar ve app dizinini yalnızca yönlendirme amacıyla tutar.

Proje dosyalarını app içindeki üst düzey klasörlerde saklayın

Bu strateji, tüm uygulama kodunu app dizininin kök dizinindeki paylaşılan klasörlerde saklar.

Proje dosyalarını özellik veya rotaya göre bölme

Bu strateji, genel olarak paylaşılan uygulama kodunu kök app dizininde depolar ve daha spesifik uygulama kodunu bunları kullanan rota segmentlerine böler.