Project Organization and File Colocation

Yönlendirme klasörü ve dosya kuralları dışında Next.js, proje dosyalarınızı nasıl düzenlediğiniz ve konumlandırdığınız konusunda görüş bildirmez.

Bu sayfa, projenizi düzenlemek için kullanabileceğiniz varsayılan davranış ve özellikleri paylaşır.

Safe colocation by default

app dizininde, iç içe geçmiş 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 page.js veya route.js dosyası eklenene kadar bir rotaya genel olarak erişilemez.

A diagram showing how a route is not publicly accessible until a page.js or route.js file is added to a route segment.

Ve bir rota herkese açık hale getirildiğinde bile, istemciye yalnızca page.js veya route.js tarafından döndürülen içerik gönderilir.

A diagram showing how page.js and route.js files make routes publicly accessible.

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.

A diagram showing colocated project files are not routable even when a segment contains a page.js or route.js file.

Bildiğim iyi oldu:

  • Bu, pages adresindeki herhangi bir dosyanın 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.

Project organization features

Next.js, projenizi düzenlemenize yardımcı olacak çeşitli özellikler sunar.

Private Folders

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

An example folder structure using private folders

app dizinindeki dosyalar varsayılan olarak güvenli bir şekilde ortak yerleştirilebildiğinden, özel klasörler ortak yerleştirme için gerekli değildir. Ancak, şunlar için yararlı olabilirler:

Bildiğim iyi oldu

  • Bir çerçeve kuralı olmamakla birlikte, özel klasörlerin dışındaki dosyaları da aynı alt çizgi kalıbını kullanarak "özel" 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.

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 edilm emesi gerektiğini gösterir.

An example folder structure using route groups

Rota grupları şunlar için kullanışlıdır:

src Directory

Next.js, uygulama kodunun ( app dahil) isteğe bağlı bir src dizini içinde depolanmasını destekler. Bu, uygulama kodunu çoğunlukla bir projenin kök dizininde bulunan proje yapılandırma dosyalarından ayırır.

An example folder structure with the `src` directory

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 Tak ma Adlarını destekler.

app/dashboard/settings/analytics/page.js
// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

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.

Store project files outside of app

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.

An example folder structure with project files outside of app

Store project files in top-level folders inside of app

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

An example folder structure with project files inside app

Split project files by feature or route

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

An example folder structure with project files split by feature or route