Yazılım'ya dön
Yazılım
Next.js App Router için Mimari Tasarım Promptu
Optimal modelClaude
Zorlukİleri
KategoriYazılım
Varyant3 adet
prompt.txt
Sen deneyimli bir full-stack yazılım mimarısın; Next.js 14/15 App Router ve React Server Components (RSC) konusunda uzmanlaşmış, büyük ölçekli üretim projelerinde performans ve sürdürülebilirlik odaklı çalışıyorsun.
## Proje Bağlamı
- **Uygulama Adı:** {uygulama_adi}
- **Proje Türü:** {proje_turu} (örn: SaaS dashboard, e-ticaret, blog platformu, kurumsal web sitesi)
- **Hedef Kullanıcı:** {hedef_kullanici}
- **Tahmini Ölçek:** {aylik_ziyaretci} aylık ziyaretçi, {eszamanli_kullanici} eşzamanlı kullanıcı
- **Kimlik Doğrulama:** {auth_sistemi} (örn: NextAuth.js v5, Clerk, Supabase Auth)
- **Veritabanı:** {veritabani} (örn: PostgreSQL + Prisma, Supabase, MongoDB + Mongoose)
- **Dağıtım Hedefi:** {deploy_platformu} (örn: Vercel, AWS ECS, self-hosted Docker)
- **Özel Gereksinimler:** {ozel_gereksinimler}
---
Bu bilgilere dayanarak aşağıdaki adımları sırayla gerçekleştir:
### Adım 1: Dizin Yapısı ve Route Organizasyonu
- App Router'ın route groups `(grup)`, parallel routes `@slot`, intercepting routes `(.)` özelliklerini kullanarak tam `app/` dizin ağacını oluştur
- Her `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx` dosyasının varlık gerekçesini belirt
- `public/`, `components/`, `lib/`, `hooks/`, `types/` dizinlerini de dahil et
### Adım 2: Server Component / Client Component Kararları
Her kritik dosya için SC veya CC kararını şu tabloyla sun:
| Dosya Yolu | Tür | Gerekçe |
|---|---|---|
Kural: Veri çekme, güvenlik kontrolü, SEO içeriği → SC. İnteraktif UI, event handler, browser API, stateful → CC.
### Adım 3: Veri Getirme Stratejisi
- Her önemli sayfa için uygun strateji seç: `fetch()` with `cache: 'force-cache' | 'no-store'`, `next.revalidate: N`, `unstable_cache`, React `cache()`, Server Actions, Route Handlers
- Waterfall sorununu önlemek için paralel `Promise.all` kullanımını göster
- `loading.tsx` + Suspense streaming sınırlarını belirle
### Adım 4: State Yönetimi Mimarisi
- Hangi state'in nerede yaşayacağını belirle: URL state (searchParams/nuqs), React Context (sarmalayıcılar), Zustand/Jotai (client-only global), form state (react-hook-form + zod)
- Server → Client prop drilling yerine hangi alternatiflerin kullanılacağını açıkla
### Adım 5: Güvenlik Katmanı
- `middleware.ts` ile route koruması: hangi path'ler korumalı, matcher config
- Server Actions'ta: input validation (zod), CSRF koruması, rate limiting
- `next.config.ts` Content Security Policy (CSP) ve güvenlik başlıkları
- Environment variable yönetimi: hangi değişkenler `NEXT_PUBLIC_`, hangisi sadece server-side
### Adım 6: Performans Optimizasyonu
- `next/image` lazy loading ve `priority` kullanım kararları
- `next/font` ile font optimizasyonu (self-hosting)
- `next/dynamic` ile code splitting stratejisi
- Bundle analyzer kurulumu ve büyük dependency'lerin tespiti
- Partial Prerendering (PPR) uygulanabilirlik değerlendirmesi
### Adım 7: Kritik Kod Örnekleri
Şu dosyaların tam TypeScript örneğini yaz (gerçek proje için copy-paste hazır):
1. `middleware.ts` — auth kontrolü + güvenlik başlıkları
2. `app/(dashboard)/layout.tsx` — korumalı dashboard layout
3. `lib/data/[ana-varlık].ts` — `unstable_cache` ile server-side veri getirme
4. `app/api/[kaynak]/route.ts` — güvenli Route Handler örneği
5. `components/ui/[veri-tablosu].tsx` — Suspense boundary ile veri listesi
## Kısıtlar
- Next.js 14.x / 15.x App Router API'larını kullan; Pages Router (`getServerSideProps`, `getStaticProps`) KULLANMA
- Her mimari karar için somut gerekçe sun
- Tüm kod TypeScript strict mode uyumlu olmalı
- Güvenlik açığı içermeyen, üretim kalitesinde kod yaz
- Gereksiz client component kullanımından kaçın; RSC'nin avantajlarını maksimize et
## Çıktı Formatı
1. **Dizin Ağacı** — ASCII tree formatında tam yapı (```text bloğu içinde)
2. **Bileşen Karar Tablosu** — SC/CC kararları (Markdown tablosu)
3. **Veri Akışı Özeti** — hangi sayfada hangi strateji kullanılıyor (madde listesi)
4. **Güvenlik Checklist** — uygulanan tüm güvenlik önlemleri (checkbox listesi)
5. **Kod Örnekleri** — her dosya için ayrı TypeScript kod bloğu
6. **Deployment Checklist** — {deploy_platformu} ortamına deploy öncesi kontrol listesiBu ne işe yarar?
Next.js 14 App Router mimarinizi SC/CC kararları, veri getirme stratejisi ve güvenlik katmanıyla eksiksiz tasarlayan AI promptu.