---
title: Next.js App Router Patterns
category: product
entity_type: skill
price: ₺369
canonical: https://forgehouse.ai/tr/skiller/nextjs-app-router-patterns/
lang: tr
hreflang_alt: https://forgehouse.ai/skills/nextjs-app-router-patterns/
last_updated: 2026-06-20
---

# Next.js App Router Patterns

> Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced…

Next.js 14+ App Router üzerinde React Server Components ile modern, tam yığın uygulamalar kurmak için eksiksiz bir desen kütüphanesi. Sunucuda mı yoksa istemcide mi render edileceğini, yavaş veriyi Suspense ile nasıl akıtacağını ve değişiklikleri Server Actions ile nasıl yöneteceğini öğretir: veri çekme, paralel rotalar, kesişen modaller, route handler ve SEO meta verisi kapsayan sekiz hazır desenle desteklenir.

## Ne için kullanılır
- ISR ve cache etiketleriyle Server Component veri çekme
- Suspense ve loading.tsx ile yavaş bileşenleri akıtma
- Server Actions ile değişiklik ve form yönetimi
- Paralel ve kesişen rotalar (dashboard slotları, fotoğraf modalleri)
- SEO sayfaları için generateMetadata + generateStaticParams
- Pages Router'dan App Router'a geçiş

## Faydalar
- Mantığı sunucuda tutarak daha küçük istemci paketleri
- Boş TTI beklemeleri yerine kademeli akışla daha hızlı algılanan yükleme
- Yalnızca etkilenen sayfaları yeniden kuran hassas cache geçersizleştirme
- Bir katman atlansa bile sonraki katmanın yakaladığı katmanlı kimlik koruması

## Ne içerir
- Render modu karar tablosu (Server/Client/Static/Dynamic/Streaming)
- Tam App Router dosya konvansiyon haritası (layout, loading, error, route, parallel)
- Server Actions, paralel rotalar ve route handler dahil 8 üretim deseni
- revalidateTag ve revalidatePath ile etiket tabanlı cache geçersizleştirme
- Edge'de ImageResponse / next/og ile dinamik OG görsel üretimi
- Sınır hatalarından kaçınmak için Server-Client yap/yapma kuralları

## Kimler için
Tahmin yerine sınanmış bir mimari isteyen, Next.js App Router üzerinde üretim uygulaması kuran veya taşıyan React geliştiricileri için.

## Nasıl çalışır
App Router üzerinde geliştirme yapılırken skill'in işlettiği gerçek döngü. Kara kutu yok, yaptığı iş budur:
1. Her şeyi colocated fetch'li Server Component olarak başlatır: async sayfalar veritabanını veya API'yi doğru cache ipucuyla doğrudan çağırır (ISR için revalidate, hedefli geçersiz kılma için tag) ve secret'lar sunucudan asla çıkmaz.
2. Client adalarını yapraklarda izole eder: yalnız gerçekten interaktif parçalar (useTransition'lı sepete-ekle butonu, form) 'use client' alır; 300KB bundle'ı 50KB'a indiren şey tam olarak budur.
3. Yavaş veriyi blokalamak yerine stream eder: route seviyesini loading.tsx karşılar, iç içe Suspense sınırları yorumlar, öneriler ve diğer yavaş widget'ları sarar; header anında render olur, kalanı akar.
4. Mutasyonları Server Action'dan geçirir: en üstte cookie/session kontrolü, veritabanı yazımı, ardından revalidateTag veya revalidatePath; tüm site değil yalnız etkilenen cache girdileri tazelenir.
5. UI gerektirdiğinde ileri route biçimlerine uzanır: bağımsız loading state'li dashboard panelleri için paralel @slot'lar, sayfa-üstü-modal foto pattern'i için intercepting (.) route'lar, dinamik route'ları SSG'ye itmek için generateStaticParams.
6. Sayfa başına SEO katmanını bitirir: generateMetadata canlı veriden title, description, OG ve Twitter kartlarını kurar; opengraph-image.tsx Edge runtime'da ImageResponse ile markaya uygun dinamik OG görseli render eder.

## Sık sorulanlar
### Pages Router'dan çıkıyoruz. Bu paket o yolu da kapsıyor mu, yoksa sadece yeni projeler için mi?
Geçiş, adı konmuş kullanım senaryolarından biri. Render modu karar tablosu ve tam dosya konvansiyon haritası, Pages Router alışkanlıklarını, yani getServerSideProps mantığını ve _app yapısını App Router karşılıklarına çevirmek için kurulmuş. Sonrasında inşa edeceğiniz sekiz desen de yanında.

### Resmi Next.js dokümanlarını okumaktan farkı ne?
Dokümanlar her API'yi tek başına anlatır. Bu paket onları birleştiren sekiz hazır üretim deseni, karar tablolarını ve dokümanların size bıraktığı sunucu istemci yap yapma kurallarını bir arada verir. Sadece API yüzeyini değil, muhakeme kararlarını da kodlar.

### use cache ve cacheLife gibi Next.js 16 önbellek yönergelerini kapsıyor mu?
Hayır. Bu kütüphane 14 ve üzeri App Router temeline odaklanır: Server Components, cache etiketli ISR, Suspense ile akış, Server Actions ve paralel rotalar. Next.js 16 Cache Components modeli kendi başına ayrı ve daha derin bir konu, ayrı bir becerinin işi.

## Fiyat
₺369, tek seferlik, abonelik yok. KDV dahil.

İlgili rehber: [Yapay zekâ ile kod inceleme](https://forgehouse.ai/tr/rehberler/yapay-zeka-kod-inceleme/)