📌 Next.js – App Router ve Route Yönetimi

Next.js, App Router sayesinde her dosyayı bir route olarak yönetir ve layout, metadata, error handling gibi birçok özelliği entegre eder.

Örnek route: /cabins/test → app/cabins/test/page.tsx

1️⃣ App Klasör Yapısı ve Route Mantığı

Her klasör bir route segmentidir.
page.tsx → rota içeriği
layout.tsx → rota altındaki tüm sayfalarda ortak yapıyı render eder.
Layout içine children ile alt sayfalar yerleştirilir.
Nested layoutlar, alt klasörlerde de oluşturulabilir.

📁 app
├── 📁 cabins
│   └── 📁 test
│       ├── 📄 page.tsx
│       └── 📄 layout.tsx
└── 📄 layout.tsx
└── 📄 page.tsx

💡 İpucu: Navigation veya footer gibi ortak bileşenler kök layout’ta tanımlanır.

2️⃣ Layout Kullanımı

import Navigation from "./components/Navigation";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navigation />
        <main>{children}</main>
      </body>
    </html>
  );
}

children → alt route’ların render edildiği yer.
Layout hiyerarşisi sayesinde sayfa tekrar kullanılabilir.

3️⃣ Metadata Yönetimi

a) Statik Meta