Routing ve layout

Klasör = Adres

App Router dosya tabanlıdır. Her klasör URL'de bir segment, klasördeki page.tsx o adresin sayfasıdır.¹

app/
├── layout.tsx              # tüm sayfaları sarar
├── page.tsx                # /
└── products/
    ├── layout.tsx          # /products ve altını sarar
    ├── page.tsx            # /products
    └── [slug]/
        └── page.tsx        # /products/canvas-sneaker

Layout: Gezinmede Kalan Arayüz

Layout, alt sayfaları children olarak sarar. Kullanıcı /products/a'dan /products/b'ye geçtiğinde ortak layout yeniden render edilmez; state'i ve scroll'u korunur, yalnızca sayfa değişir.¹

// app/products/layout.tsx
export default function ProductsLayout({ children }: LayoutProps<"/products">) {
  return (
    <section>
      <aside>Kategoriler</aside>
      {children}
    </section>
  );
}

LayoutProps ve PageProps import etmeden kullandığınız global tiplerdir. Next.js onları next dev, next build ya da next typegen sırasında klasörlerinizden üretir; params tipini elle yazmazsınız.¹

Layout yeniden render edilmediği için iki sınırı vardır:²

• searchParams alamaz; değer bayatlardı. URL parametresini sayfada ya da bir Client Component'te useSearchParams ile okuyun.

• Aktif menü için pathname alamaz. Linkleri usePathname kullanan küçük bir Client Component'e taşıyın.

Dinamik Segment

Köşeli parantezli klasör veriden üretilen sayfalar içindir:³

// app/products/[slug]/page.tsx
export default async function ProductPage({ params }: PageProps<"/products/[slug]">) {
  const { slug } = await params;
  const product = await getProduct(slug);

  return <h1>{product?.name}</h1>;
}

params ve searchParams bir Promise'tir; await etmeden kullanamazsınız. Eski tutorial'larda params.slug diye doğrudan okunur; Next.js 15'ten beri bu değişti.⁴

searchParams: Sayfada mı, İstemcide mi

searchParams okumak sayfanın o kısmını istek anına bağlar. Cache Components ile bunu bir <Suspense> içinde yapmanız gerekir; nedenini Cache ve render modeli dersinde göreceksiniz.¹

Route Group ve Birden Fazla Layout

Parantezli klasör URL'ye eklenmez ama kendi layout'una sahip olabilir. Mağaza ve pazarlama sayfalarına farklı üst menü vermek için:⁶

app/
├── (marketing)/
│   ├── layout.tsx          # pazarlama menüsü
│   └── about/page.tsx      # /about
└── (shop)/
    ├── layout.tsx          # mağaza menüsü ve sepet
    └── cart/page.tsx       # /cart

Kök app/layout.tsx'i silip her gruba kendi <html>'li layout'unu verirseniz birden fazla kök layout kurarsınız. Gruplar arasında geçişte sayfa tamamen yeniden yüklenir.⁶

Link ile Gezinme

<Link>, <a>'yı genişletir. Görünür linklerin hedefini arka planda prefetch eder ve tıklamada sayfayı yenilemeden geçiş yapar; ortak layout'lar yerinde kalır.⁷

import Link from "next/link";

<Link href={`/products/${product.slug}`}>{product.name}</Link>;

Kodla yönlendirme için useRouter kullanılır. Doğru import yeri next/navigation'dır. next/router eski Pages Router'a aittir ve App Router'da çalışmaz.⁸ AI araçları bu ikisini sık karıştırır.

Arama gibi URL'ye parametre yazan formlar için next/form var. <form> gibi davranır ama gönderimi istemci tarafı gezinmeye çevirir ve JavaScript yüklenmeden de çalışır:⁹

import Form from "next/form";

<Form action="/products">
  <input name="q" aria-label="Ürün ara" />
  <button>Ara</button>
</Form>;

İleri Kalıplar

İki kalıp belirli arayüzler içindir, her projede gerekmez:¹¹¹²

Kendin Dene

• app/products/[slug]/page.tsx'te params'ı await etmeden params.slug diye okuyun. TypeScript ne diyor?

• products/layout.tsx'e bir sayaç butonu (Client Component) ekleyin. İki ürün arasında gezinin; sayaç sıfırlanıyor mu?

• Aktif menü linkini usePathname ile işaretleyen bir NavLink yazın.

• typedRoutes'u açıp var olmayan bir adrese link verin.

Detaylı Öğrenmek İçin

• Resmi doküman: "Layouts and Pages" ve "Linking and Navigating" sayfaları; prefetch, streaming ve istemci tarafı geçişin birlikte nasıl çalıştığını anlatır.¹⁷

• Resmi doküman: layout.js referansının "Caveats" bölümü; layout'un neden searchParams ve pathname almadığını örneklerle gösterir.²

• Resmi doküman: Next.js Learn kursunun layout ve navigasyon bölümleri.¹³