Next.js, ACF ve Yeniden Kullanılabilir Bileşen Mimarisi ile Headless WordPress CMS
Bir işletmenin, WordPress'in içerik düzenleme esnekliğine sahip, ancak geleneksel WordPress temalarının sınırlamaları olmaksızın, modern bir React frontend'in hızı ve geliştirici deneyimiyle yüksek performanslı, SEO optimize edilmiş bir pazarlama web sitesine ihtiyacı vardı.
Projenizi Tartışın
Zorluk
Geleneksel WordPress siteleri, modern web performansı ve SEO standartlarını karşılamakta zorlanıyordu:
- Monolitik WordPress temaları yavaştı, ağırdı ve bakımı zordu
- İçerik editörleri, bileşen düzeyinde esneklik olmaksızın katı sayfa düzenlerine bağlı kalıyordu
- Sunucu tarafından oluşturulan PHP sayfaları, Core Web Vitals (LCP, CLS, FID) üzerinde düşük puanlar alıyordu
- SEO, otomatik yapılandırılmış veri olmaksızın manuel meta etiket yönetimi gerektiriyordu
- Sayfalar arasında UI desenlerini yeniden kullanmak, şablon kodunu çoğaltmayı gerektiriyordu, bu da sapmalara ve tutarsızlığa yol açıyordu
- Yalnızca WordPress REST API, karmaşık, iç içe içerik yapılarını modelleme esnekliğinden yoksundu
Çözümümüz
Esnek bir içerik modelleme katmanı olarak Advanced Custom Fields (ACF), frontend'de yeniden kullanılabilir bir bileşen sistemi ve baştan sona otomatik SEO optimizasyonu kullanarak 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 tipize edilmiş içeriği açığa çıkarmak için WPGraphQL + WPGraphQL for ACF
- Frontend: App Router, React Server Components, TypeScript ile Next.js
- Stil Oluşturma: Yardımcı program öncelikli, tasarım sistemiyle uyumlu stil oluşturma için Tailwind CSS
- SEO: Next.js Metadata API, JSON-LD yapılandırılmış veri, otomatik sitemap oluşturma
- Barındırma: Vercel (frontend) + yönetilen WordPress hosting (CMS)
- Medya: Kaynak olarak WordPress medya kütüphanesi ile Next.js Image optimizasyonu
ACF ile İçerik Modelleme
Esnek İçerik Alanları
ACF Flexible Content alanları, editörlerin önceden tanımlanmış içerik bloklarından sayfalar oluşturmasına olanak tanır. Her blok, hero bölümleri, özellik ızgaraları, referans karuselleri, CTA'lar, SSS akordiyonları, istatistik sayaçları, görsel-metin düzenleri, video gömülüleri, fiyatlandırma tabloları ve blog akışları gibi yaygın desenleri kapsayan frontend'deki bir React bileşenine doğrudan eşlenir.
Repeater ve Grup Alanları
- Listeler için (ekip üyeleri, portföy öğeleri, zaman çizelgesi girişleri) Repeater alanları
- Yapılandırılmış iç içe veriler için (adres blokları, sosyal bağlantılar, SEO geçersiz kılmaları) Grup alanları
- Yazıları, sayfaları ve özel yazı tiplerini bağlamak için İlişki alanları
- Küresel ayarlar için (başlık, altbilgi, sosyal bağlantılar, marka renkleri) Seçenek sayfaları
Yeniden Kullanılabilir Bileşen Mimarisi
Bileşen Tasarım İlkeleri
Frontend, farklı katmanlara sahip modüler bir mimariyi takip eder:
- Blok bileşenleri — Her ACF Flexible Content bloğu için bir React bileşeni
- Temel UI bileşenleri — Düğmeler, kartlar ve rozetler gibi yeniden kullanılabilir öğeler
- Düzen bileşenleri — Başlık, altbilgi, navigasyon ve kapsayıcı sarmalayıcılar
- SEO bileşenleri — Şema oluşturucular ve meta etiket yardımcı programları
Blok Çözümleyici Deseni
Merkezi bir çözümleyici, ACF blok tiplerini React bileşenlerine eşler ve editörlerin geliştirici katılımı olmadan sayfalar oluşturmasını sağlar:
- WordPress editörü açılır menüden blokları seçer ve alanları doldurur
- WPGraphQL, sayfayı blok tipleri ve alan verileriyle yapılandırılmış JSON olarak sunar
- Next.js, sayfa verilerini derleme zamanında (ISR) veya istek zamanında (SSR) getirir
- Blok çözümleyici, blok dizisi boyunca yineler ve eşleşen React bileşenini oluşturur
- Her bileşen, ACF alan verilerini tipize edilmiş prop'lar 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
- Kanonik URL'ler — Yinelenen içeriği önleyen otomatik kanonik etiket oluşturma
- Sitemap Oluşturma — Derleme zamanında WordPress sayfa/yazı verilerinden oluşturulan dinamik XML sitemap
- robots.txt — Ortamdan haberdar kurallarla programatik oluşturma
- Yapılandırılmış Veri — Organization, Article, FAQ, BreadcrumbList ve Product türleri için JSON-LD şeması
Performans SEO (Core Web Vitals)
- Statik Oluşturma (ISR) — Webhook aracılığıyla içerik değişikliğinde önceden oluşturulmuş ve yeniden doğrulanmış sayfalar
- Görsel Optimizasyonu — Otomatik WebP/AVIF dönüştürme, lazy loading, duyarlı srcset
- Yazı Tipi Optimizasyonu — Sıfır düzen kaydırmalı özel yazı tipi yükleme
- Kod Bölme — React Server Components ile rota başına otomatik kod bölme
- Edge Caching — 100ms altı TTFB için küresel edge ağı
İçerik SEO'su
- Sayfa başına SEO alanları — Özel alanlar aracılığıyla Meta başlık, açıklama ve OG görsel geçersiz kılma
- Breadcrumbs — Şema işaretlemesi ile otomatik oluşturulan breadcrumb navigasyonu
- Dahili Bağlantı — İlişki alanları, yapılandırılmış dahili 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ışı
- İçerik Değişikliği — Editör WordPress admin panelinde içerik yayınlar veya günceller
- Webhook Tetikleyici — WordPress, Next.js yeniden doğrulama endpoint'ine bir webhook tetikler
- ISR Yeniden Doğrulama — Next.js yalnızca etkilenen sayfaları yeniden oluşturur
- CDN Geçersiz Kılma — Güncellenen sayfalar, yayınlandıktan saniyeler sonra edge'den sunulur
Temel Özellikler
- Görsel Sayfa Oluşturucu — Editörler, koda dokunmadan ACF bloklarından sayfalar oluşturur
- Tipize Edilmiş İçerik API'si — WPGraphQL + ACF tam tipize edilmiş GraphQL şeması sağlar
- Bileşen Kütüphanesi — Tüm yaygın pazarlama sayfası desenlerini kapsayan 10'dan fazla yeniden kullanılabilir blok
- ISR + Webhook'lar — İçerik güncellemeleri saniyeler içinde canlı sitede yansıtılır
- SEO Otomasyonu — CMS verilerinden oluşturulan yapılandırılmış veri, sitemaps ve meta etiketleri
- Core Web Vitals — En yüksek Lighthouse puanları için optimize edilmiş görseller, yazı tipleri ve kod bölme
- Önizleme Modu — WordPress önizleme düğmesi, taslak içeriği Next.js frontend'inde gösterir
- Çok Dilli Uyumlu — Uluslararasılaştırılmış içerik için ACF + WPML/Polylang entegrasyonu
Sonuçlar
Teknoloji Yığını
Sıkça Sorulan Sorular
MicrocosmWorks, geleneksel bir WordPress temasından başsız bir Next.js ön ucuna geçiş yaptıktan sonra 3-5 kat daha hızlı sayfa yükleme süreleri ölçtü. Bunun temel nedeni, Next.js'in WordPress'in PHP çalışma zamanı aracılığıyla her istekte sayfalar oluşturmak yerine, artımlı statik yenileme ile önceden işlenmiş statik HTML sunmasıdır. Başsız mimari ayrıca, Next.js ön ucu yalnızca gerçekten ihtiyaç duyduğu kodu yüklediği için, ön uç JavaScript ve CSS enjekte eden WordPress eklentilerinin performans yükünü de ortadan kaldırır.
MicrocosmWorks, ACF alan gruplarını verilerini WordPress REST API ve WPGraphQL aracılığıyla açığa çıkaracak şekilde yapılandırdı. Bu, Next.js ön ucunun kahraman bölümleri, özellik ızgaraları, referanslar ve özel düzenler gibi yapılandırılmış içeriği türlenmiş GraphQL sorguları kullanarak sorgulamasını sağlar. Bu sayede içerik editörleri, WordPress admin panelinde aynı tanıdık ACF düzenleme deneyimine sahip olurken, ön uç bu alanları geleneksel ACF şablon oluşturmaya göre daha hızlı ve görsel olarak daha tutarlı olan amaca yönelik React bileşenleri aracılığıyla işler.
MicrocosmWorks, doğrudan ACF Esnek İçerik düzenlerine eşleşen 25'ten fazla yeniden kullanılabilir React bileşeni kütüphanesi oluşturdu. Bu sayede içerik editörleri, geliştirici müdahalesi olmadan kahraman banner'lar, özellik ızgaraları, fiyatlandırma tabloları ve CTA blokları gibi önceden oluşturulmuş bölümleri seçip sıralayarak yeni sayfalar oluşturabilirler. İlk bileşen kütüphanesi oluşturulduktan sonra, yeni açılış sayfaları WordPress admin paneli aracılığıyla dakikalar içinde oluşturulup yayınlanabilir, böylece rutin içerik güncellemeleri için tasarım-geliştirme döngüsü ortadan kalkar.
MicrocosmWorks, WordPress'in yerleşik ön izleme düğmesini Next.js uygulamasındaki bir taslak işleme uç noktasına bağlayan bir ön izleme modu uyguladı. Bu mod, editörlere yayınlanmamış değişikliklerinin canlı sitede nasıl görüneceğini tam olarak gösterir. Ön izleme sistemi, statik önbelleği atlayarak taslak içeriği doğrudan WordPress API'sinden gerçek zamanlı olarak getirir ve ACF alan ön izlemelerini destekleyerek editörlerin genel bir metin ön izlemesi yerine gerçek bileşen oluşturmayı görmelerini sağlar.
MicrocosmWorks, başsız WordPress geçişlerini 15-35$/saat geliştirme oranlarıyla gerçekleştirir. Tipik bir geçiş, benzersiz sayfa şablonlarının ve özel işlevselliğin sayısına bağlı olarak ACF içerik modellemesi, bileşen kütüphanesi geliştirme ve Next.js ön uç oluşturmayı içeren 2-4 ay sürer. Sürekli barındırma maliyeti, Next.js ön ucunun Vercel'in ücretsiz veya düşük maliyetli katmanlarında dağıtılabilmesi ve WordPress'in ön uç trafik yükü olmadan hafif bir başsız CMS olarak çalışması nedeniyle geleneksel WordPress barındırmadan genellikle daha düşüktür.
İşletmenizi Dönüştürmeye Hazır mısınız?
Zorluklarınıza benzer çözümler uygulamamızın yollarını konuşalım.