📁 Proje Kök Dizini: my-next-app/
Next.js uygulamasının ana klasörüdür. Projenin tüm dosya ve yapılandırmaları burada yer alır.
📂 public/ — Statik Dosyalar
Tarayıcıya doğrudan servis edilen dosyalar burada bulunur.
Örnekler:
images/logo.pngfonts/inter.woff2
Bu dosyalar şu şekilde erişilir:
/logo.png
/images/logo.png
CDN mantığıyla çalışır, build sürecine dahil edilmez.
📂 src/ — (Opsiyonel ama Önerilen)
Kod organizasyonu için tavsiye edilen klasördür. Uygulama mantığı genellikle burada toplanır.
📂 components/ — Yeniden Kullanılabilir UI Bileşenleri
Uygulama genelinde tekrar kullanılabilen arayüz bileşenleri burada yer alır.
Örnekler:
Header.tsxFooter.tsxButton.tsx
Amaç:
- Kod tekrarını azaltmak
- Atomic design yapısını desteklemek
- Modüler mimari oluşturmak
📂 app/ — App Router Çekirdeği
Next.js 13+ ile gelen App Router sisteminin merkezidir. Route yapısı klasör bazlıdır.
Temel Dosyalar:
layout.tsx
Root layout.<html>ve<body>yapısını içerir. Tüm sayfalarda ortaktır.page.tsx
İlgili route’un ana sayfasıdır.loading.tsx
Veri yüklenirken gösterilen UI.error.tsx
Route seviyesinde hata yakalama ve gösterim.
📌 Route Örnekleri
/blog Route’u
app/
└── blog/
├── layout.tsx
├── page.tsx
URL: /blog
layout.tsx→ Blog bölümüne özel layoutpage.tsx→ Blog liste sayfası
Dinamik Route: /blog/[slug]
app/
└── blog/
└── [slug]/
└── page.tsx
URL: /blog/post-1
[slug]→ Dinamik parametrepage.tsx→ İlgili blog yazısının UI’ı
API Route: /api/hello
app/
└── api/
└── hello/
└── route.ts
URL: /api/hello
route.ts→ Backend logic- GET, POST, PUT, DELETE handler’ları içerir
📂 Diğer Önemli Dosyalar
package.json→ Proje bağımlılıkları ve script’lernext.config.js→ Next.js konfigürasyonu.env.local→ Ortam değişkenleritsconfig.json→ TypeScript ayarları.gitignore→ Git tarafından takip edilmeyecek dosyalar
🎨Renk Kodlarının Anlamı
- Mavi Klasörler: Dizinler
- Yeşil Dosyalar: Page / Layout / UI
- Sarı Dosyalar: Konfigürasyon
- Mor Dosyalar: API / Server logic
🚀 Profesyonel ve Geliştirilmiş Açıklama
Modern Next.js App Router Mimarisi
Next.js App Router, dosya tabanlı routing mantığını React Server Components, nested layouts ve route-level error boundaries ile birleştirerek ölçeklenebilir ve modüler bir frontend mimarisi sunar.
Bu yapı:
- 📦 Modüler
- ⚡ Performans odaklı (Server Components)
- 🔐 Route seviyesinde hata yönetimi destekli
- 🧠 Otomatik kod bölme (Automatic Code Splitting)
- 🌍 SEO dostu (Server-side rendering & Streaming)
1️⃣ app/ Klasörü Neden Kritik?
App Router sisteminde her klasör bir route segment’idir.
Örneğin:
app/dashboard/settings/page.tsx
Oluşturur:
/dashboard/settings
Bu yaklaşım:
- Merkezi route tanımı gerektirmez
- URL hiyerarşisini dosya yapısıyla eşleştirir
- Nested layout’lar sayesinde UI tekrarını azaltır
2️⃣ Layout Sistemi (Nested Layout Architecture)
layout.tsx dosyaları sayesinde:
- Global layout (root layout)
- Bölüm bazlı layout (örneğin blog layout)
- Segment bazlı layout
tanımlanabilir.
Bu, enterprise seviyede büyük projelerde:
- Navbar tekrarını önler
- Yetkilendirme katmanını route bazlı yönetmeyi sağlar
- Performansı artırır (layout yeniden render edilmez)
3️⃣ Server & Client Component Ayrımı
App Router ile:
- Varsayılan olarak tüm component’ler Server Component
"use client"ile client component yapılır
Avantajları:
- Daha az JS bundle
- Daha iyi TTFB
- Daha güçlü SEO
4️⃣ API Route Yapısı
route.ts dosyası sayesinde aynı proje içinde backend logic yazılabilir.
Örnek handler yapısı:
export async function GET() {}export async function POST() {}
Bu yapı:
- Microservice ihtiyacını azaltır
- Serverless uyumludur
- Vercel optimizasyonlu çalışır
5️⃣ Ölçeklenebilir Proje Organizasyonu (Önerilen)
Profesyonel projelerde genellikle şu yapı tercih edilir:
src/
├── app/
├── components/
├── lib/ → yardımcı fonksiyonlar
├── services/ → API servisleri
├── hooks/ → custom React hooks
├── types/ → TypeScript tipleri
└── constants/ → sabitler
Bu yapı:
- Domain driven design’e yakındır
- Test edilebilirliği artırır
- Takım çalışmasını kolaylaştırır
🎯 Sonuç
Bu dosya yapısı:
- Küçük projeler için sade
- Orta ölçekli projeler için modüler
- Büyük projeler için genişletilebilir
bir mimari sunar.
Next.js App Router yapısını doğru kullanmak:
- Performans
- SEO
- Kod sürdürülebilirliği
- Geliştirici deneyimi
açısından ciddi avantaj sağlar.
