Next.js 15 Sıfırdan Başlangıç

App Router Nedir?

Next.js 13 ile gelen ve 15\'te olgunlaşan App Router, dosya/klasör yapısına göre URL\'leri otomatik oluşturur. app/ klasörüne eklediğiniz her page.tsx dosyası bir sayfa olur.

Temel Routing Mantığı

app/
├── page.tsx              → /
├── hakkimizda/
│   └── page.tsx          → /hakkimizda
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/
│       └── page.tsx      → /blog/herhangi-bir-yazi
└── iletisim/
    └── page.tsx          → /iletisim

İlk Sayfanızı Oluşturun

// app/hakkimizda/page.tsx
export default function Hakkimizda() {
  return (
    <div className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-4">Hakkımızda</h1>
      <p className="text-gray-600">
        Bu sayfaya /hakkimizda URL\'si ile ulaşılır.
      </p>
    </div>
  );
}

Dinamik Rotalar

Köşeli parantez [slug] ile dinamik segment oluşturursunuz:

// app/blog/[slug]/page.tsx
interface Props {
  params: Promise<{ slug: string }>;
}

export default async function BlogYazisi({ params }: Props) {
  const { slug } = await params; // Next.js 15'te params artık Promise

  return (
    <article>
      <h1>Yazı: {slug}</h1>
      <p>Bu URL: /blog/{slug}</p>
    </article>
  );
}

Nested (İç İçe) Rotalar

app/
└── dashboard/
    ├── layout.tsx          ← Dashboard genelinde geçerli layout
    ├── page.tsx            → /dashboard
    ├── ayarlar/
    │   └── page.tsx        → /dashboard/ayarlar
    └── profil/
        └── page.tsx        → /dashboard/profil

layout.tsx ile Ortak Şablon

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <aside className="w-64 bg-gray-900 text-white p-4">
        <nav>
          <a href="/dashboard">Ana Sayfa</a>
          <a href="/dashboard/ayarlar">Ayarlar</a>
        </nav>
      </aside>
      <main className="flex-1 p-8">{children}</main>
    </div>
  );
}

Özel Dosyalar