Next.js, ACF ve Yeniden Kullanılabilir Bileşen Mimarisi ile Headless WordPress CMS

Esnek bir içerik modelleme katmanı olarak Advanced Custom Fields (ACF) kullanarak, ön uçta yeniden kullanılabilir bir bileşen sistemi ve baştan sona otomatik SEO optimizasyonu ile headless WordPress + Next.js mimarisi oluşturduk.

Mimari

• CMS: Yapılandırılmış içerik modellemesi için ACF Pro ile WordPress (headless)
• API Katmanı: GraphQL aracılığıyla yazılı içerik sunmak için WPGraphQL + WPGraphQL for ACF
• Ön Uç: App Router, React Server Components, TypeScript ile Next.js
• Stil Oluşturma: Utility-first, tasarım sistemi uyumlu stil oluşturma için Tailwind CSS
• SEO: Next.js Metadata API, JSON-LD yapılandırılmış veri, otomatik site haritası oluşturma
• Barındırma: Vercel (ön uç) + yönetilen WordPress barındırma (CMS)
• Medya: Kaynak olarak WordPress medya kütüphanesi ile Next.js Image optimizasyonu

ACF ile İçerik Modelleme

Flexible Content Fields

ACF Flexible Content fields, editörlerin önceden tanımlanmış içerik bloklarından sayfalar oluşturmasını sağlar. Her blok, ön uçtaki bir React bileşenine doğrudan eşlenir ve kahraman bölümleri, özellik ızgaraları, referans atlıkarıncaları, CTAs, FAQ akordeonları, istatistik sayaçları, görsel-metin düzenleri, video yerleştirmeleri, fiyatlandırma tabloları ve blog akışları gibi yaygın desenleri kapsar.

Repeater & Group Fields

• Repeater fields listeler için (ekip üyeleri, portföy öğeleri, zaman çizelgesi girişleri)
• Group fields yapılandırılmış iç içe veriler için (adres blokları, sosyal bağlantılar, SEO geçersiz kılmaları)
• Relationship fields yazıları, sayfaları ve özel yazı tiplerini bağlamak için
• Options pages genel ayarlar için (üst bilgi, alt bilgi, sosyal bağlantılar, marka renkleri)

Yeniden Kullanılabilir Bileşen Mimarisi

Bileşen Tasarım İlkeleri

Ön uç, belirgin katmanlarla modüler bir mimariyi takip eder:

• Block components — Her ACF Flexible Content bloğu için bir React bileşeni
• Primitive UI components — Düğmeler, kartlar ve rozetler gibi yeniden kullanılabilir öğeler
• Layout components — Üst bilgi, alt bilgi, gezinme ve kapsayıcı sarmalayıcılar
• SEO components — Şema oluşturucular ve meta etiket yardımcıları

Block Resolver Pattern

Merkezi bir çözümleyici, ACF blok tiplerini React bileşenleriyle eşler ve editörlerin geliştirici müdahalesi olmadan sayfaları oluşturmasını sağlar:

1. WordPress editörü, bir açılır menüden blokları seçer ve alanları doldurur
2. WPGraphQL, sayfayı blok tipleri ve alan verileri ile yapılandırılmış JSON olarak ortaya çıkarır
3. Next.js, sayfa verilerini oluşturma zamanında (ISR) veya istek zamanında (SSR) alır
4. Block resolver, blok dizisi üzerinde döner ve eşleşen React bileşenini işler
4. Her bileşen, ACF alan verilerini yazılı props olarak alır

SEO Optimizasyonu

Teknik SEO

• Dinamik meta etiketleri — CMS verilerinden sayfa başına oluşturulan Başlık, açıklama, Open Graph ve Twitter Card etiketleri
• Canonical URLs — Yinelenen içeriği önleyen otomatik canonical etiket oluşturma
• Site Haritası Oluşturma — Oluşturma zamanında WordPress sayfa/yazı verilerinden oluşturulan dinamik XML site haritası
• robots.txt — Ortam bilincine sahip kurallarla programatik oluşturma
• Yapılandırılmış Veri — Organizasyon, Makale, FAQ, BreadcrumbList ve Ürün tipleri için JSON-LD şeması

Performans SEO (Core Web Vitals)

• Statik Oluşturma (ISR) — Sayfalar önceden işlenir ve webhook aracılığıyla içerik değişikliğinde yeniden doğrulanır
• Görüntü Optimizasyonu — Otomatik WebP/AVIF dönüşümü, tembel yükleme, duyarlı srcset
• Yazı Tipi Optimizasyonu — Sıfır düzen kaydırmalı özel yazı tipi yüklemesi
• Kod Bölme — React Server Components ile rota başına otomatik kod bölme
• Edge Önbellekleme — 100 ms altı TTFB için küresel edge ağı

İçerik SEO'su

• Sayfa Başına SEO Alanları — Özel alanlar aracılığıyla Meta başlığı, açıklaması ve OG görseli geçersiz kılma
• Breadcrumbs — Şema işaretlemesi ile otomatik oluşturulan breadcrumb navigasyonu
• İç Bağlantı — Relationship fields, yapılandırılmış iç bağlantı önerilerini etkinleştirir
• Alt Metin Zorunluluğu — Tüm görsel alanlarında zorunlu alt metin

WordPress'ten Next.js'e Veri Akışı

1. İçerik Değişikliği — Editör içeriği WordPress yönetim panelinde yayınlar veya günceller
2. Webhook Tetikleyicisi — WordPress, Next.js yeniden doğrulama uç noktasına bir webhook tetikler
3. ISR Yeniden Doğrulama — Next.js, yalnızca etkilenen sayfaları yeniden oluşturur
4. CDN Geçersiz Kılma — Güncellenmiş sayfalar yayınlandıktan saniyeler içinde edge'den sunulur

Temel Özellikler

1. Görsel Sayfa Oluşturucu — Editörler koda dokunmadan ACF bloklarından sayfalar oluşturur
2. Yazılı İçerik API'si — WPGraphQL + ACF, tamamen yazılı GraphQL şeması sağlar
3. Bileşen Kütüphanesi — Tüm yaygın pazarlama sayfası desenlerini kapsayan 10'dan fazla yeniden kullanılabilir blok
4. ISR + Webhook'lar — İçerik güncellemeleri canlı sitede saniyeler içinde yansıtılır
5. SEO Otomasyonu — CMS verilerinden oluşturulan yapılandırılmış veri, site haritaları ve meta etiketleri
6. Core Web Vitals — En yüksek Lighthouse puanları için optimize edilmiş görseller, yazı tipleri ve kod bölme
7. Önizleme Modu — WordPress önizleme düğmesi, taslak içeriği Next.js ön ucunda gösterir
8. Çoklu Dil Uyumlu — Uluslararasılaştırılmış içerik için ACF + WPML/Polylang entegrasyonu