# 04 · Frontend Yol Haritası (Prototip → Next.js)

Yön seçildikten sonra kazanan varyasyonun gerçek temele taşınması ve modül modül geliştirilmesi.

---

## 1. Prototipten Next.js'e Geçiş

| Prototip | Next.js karşılığı |
|----------|--------------------|
| `style.css` token'ları (`:root`) | `tailwind.config.ts` theme + CSS değişkenleri / shadcn tema |
| `index.html` bölümleri | `app/(public)/page.tsx` + `components/sections/*` |
| Sayfalar (uyelik, etkinlikler...) | `app/(public)/uyelik/page.tsx` vb. |
| Manrope `<link>` | `next/font/google` Manrope |
| Görseller `assets/img` | `public/` + `next/image` |
| Mobil menü / dil / çerez JS | React client component + (next-intl) + cookie consent component |

## 2. Önerilen Next.js Klasör Yapısı
```
app/
  [locale]/
    (public)/
      page.tsx                # Ana Sayfa
      uyelik/page.tsx
      aile/page.tsx
      vatandaslik/page.tsx
      etkinlikler/page.tsx · etkinlikler/[slug]/page.tsx
      magaza/page.tsx · magaza/[slug]/page.tsx
      gezi-rehberi/page.tsx · gezi-rehberi/[slug]/page.tsx
      hakkimizda/page.tsx · iletisim/page.tsx
    (auth)/ giris · kayit
    (panel)/
      panel/page.tsx · profil · aile · vatandaslik · etkinliklerim · siparislerim
  layout.tsx · globals.css
components/
  ui/            # shadcn/ui (button, card, input, dialog, tabs, badge...)
  layout/        # Header, Footer, LangSwitcher, CookieConsent, MobileNav
  sections/      # Hero, ModuleGrid, Stats, Announcements, Events, Shop, Travel, About, CTA
  forms/         # MembershipForm, CitizenshipUpload, ContactForm
lib/             # utils, i18n, validation (zod), api client
messages/        # tr.json · ro.json · en.json (next-intl)
prisma/          # schema.prisma
public/          # görseller, fontlar
```

## 3. Bileşen → shadcn/ui Eşleme
Button · Card · Input/Textarea/Select · RadioGroup (üyelik tipi) · Checkbox (KVKK) · Tabs (mağaza/etkinlik filtre) · Badge (etiket/durum) · Dialog/Sheet (mobil menü, sepet) · Accordion (SSS/rehber) · Breadcrumb · Avatar (aile/topluluk) · Progress/Stepper (vatandaşlık durum makinesi) · Toast (bildirim).

## 4. Çok Dillilik (next-intl)
- `[locale]` segment + `tr`/`ro`/`en` mesaj dosyaları + `hreflang` + dil bazlı meta.
- Varsayılan `tr`; SEO için her dil ayrı URL.

## 5. Veri Akışı
- Faz 1: mock veri (`lib/mock`).
- Faz 2: Server Components + Server Actions → Prisma/PostgreSQL.
- Auth.js ile oturum & RBAC; korumalı `(panel)` route group middleware ile.

## 6. Erişilebilirlik & SEO Checklist
- [ ] Semantik landmark + başlık hiyerarşisi · [ ] `:focus-visible` · [ ] AA kontrast · [ ] `prefers-reduced-motion`
- [ ] `alt` metinleri · [ ] Form label & hata mesajları · [ ] Klavye gezinme
- [ ] Metadata API (title/description) · [ ] JSON-LD (Organization, Event, Product) · [ ] sitemap.xml · [ ] hreflang · [ ] OpenGraph

## 7. Sprint Planı (öneri — yön seçimi sonrası)
1. **S0 · Temel (1 hafta):** Next.js + Tailwind + shadcn + Manrope + i18n iskeleti, tasarım token'ları, Header/Footer/dil/çerez, Ana Sayfa.
2. **S1 · Üyelik & Kimlik:** Auth.js, kayıt/giriş, üyelik başvuru akışı + e-posta doğrulama, durum makinesi.
3. **S2 · Vatandaşlık & Aile:** Vatandaşlık başvuru + şifreli evrak yükleme + stepper; aile yönetimi + 18 yaş altı vasi onayı.
4. **S3 · Etkinlik & Mağaza:** Etkinlik listesi/detay/kayıt; mağaza katalog/detay/sepet; (iyzico sanal POS entegrasyonu).
5. **S4 · Gezi Rehberi & Panel:** Headless içerik + harita/medya; üye paneli ekranları; bildirimler.
6. **S5 · Sertleştirme:** SEO/perf/Core Web Vitals, erişilebilirlik denetimi, KVKK/GDPR akışları, QA, staging→prod.

> **Sonraki faz (kapsam dışı bugün):** Sosyal Ağ (profil grafiği, mesajlaşma, akış) ve Profesyonel Ağ (faceted dizin, Meilisearch). IA ve token'lar bunlara genişlemeye hazır.