DEV Community

Cover image for 500+ Projeden Sonra WordPress'i Neden Bıraktık? Bir Web Ajansının Next.js Mimarisine Geçişi
Renklisayfa
Renklisayfa

Posted on

500+ Projeden Sonra WordPress'i Neden Bıraktık? Bir Web Ajansının Next.js Mimarisine Geçişi

#architecture #nextjs #webdev #wordpress

500+ Projeden Sonra WordPress'i Neden Bıraktık? Bir Web Ajansının Next.js Mimarisine Geçişi

Ajans dünyasında çalışan her web geliştiricisi şu kabusu en az bir kez yaşamıştır:

Pazartesi sabahı ajansa gelirsiniz, bir müşteriden acil e-posta düşer: "Sitemiz beyaz ekran veriyor!" Panelde yapılan otomatik bir WooCommerce veya form eklentisi güncellemesi, PHP sürümüyle çakışmış ve tüm siteyi kilitlemiştir.

Sayfa açılış hızını ölçersiniz: Mobil Lighthouse skoru 28. Neden? Çünkü temaya gömülü 45 farklı CSS dosyası, 3 MB'lık sıkıştırılmamış JavaScript kütüphaneleri ve kullanılmayan slider animasyonları ana thread'i boğmaktadır.

2006'dan bu yana Ankara merkezli olarak 500'ün üzerinde kurumsal web projesi geliştiren Renklisayfa ekibi olarak, yıllar boyunca biz de bu monolitik şablon ekosisteminin tüm aşamalarından geçtik.

Ancak bir noktada şu soruyu sormak zorunda kaldık: Müşterilerimize her ay bozulan şablonlar teslim etmek yerine, neden gerçek bir yazılım mühendisliği altyapısı sunmuyoruz?

İşte WordPress'i tamamen geride bırakıp kendi Next.js + React 19 + TypeScript tabanlı ajans mimarimizi nasıl kurduğumuzun hikayesi ve çıkardığımız mimari dersler.

1. Bizi WordPress'ten Kaçıran 3 Kronik Sorun

Geliştirici gözüyle baktığımızda geleneksel monolitik CMS'lerin sürdürülemez hale gelmesinin 3 temel sebebi vardı:

  • Eklenti Bağımlılığı ve Güvenlik Açıkları: Basit bir iletişim formu veya SEO başlığı için bile üçüncü parti eklenti kurmak zorundaydınız. 30 eklenti demek, 30 farklı geliştiricinin yazdığı denetimsiz kod ve sürekli güvenlik taraması demektir.
  • Korkunç Core Web Vitals Skorları: Google'ın INP (Interaction to Next Paint), LCP ve CLS metriklerini hazır temalarla yeşile (90+) çekmek, motoru bozuk bir arabayı modifiye etmeye çalışmak gibiydi.
  • Kırılgan Yönetim Paneli: Müşteriye panel teslim ettiğinizde bir satır metin değiştirmek isterken tüm sayfa düzenini bozabiliyordu.

2. Kurduğumuz Modern Ajans Yığını (Tech Stack)

Şablon sistemleri çöpe attıktan sonra kurumsal web projelerimiz için belirlediğimiz modern geliştirme yığını:

[Frontend / Render Katmanı]  → Next.js (App Router) + React 19 + Tailwind CSS
[Veri & ORM Katmanı]        → Prisma ORM + PostgreSQL / MySQL
[Zengin Metin Editörü]      → TipTap (ProseMirror tabanlı headless editor)
[Performans & Önbellek]     → React Server Components (RSC) + React.cache()
[Arama Zekası & Şema]       → Yerleşik @graph JSON-LD & Gerçek Zamanlı Kural Motoru
Enter fullscreen mode Exit fullscreen mode

Bu mimariyle birlikte projenin üretim hızını düşürmeden her müşteriye sıfır eklenti kirliliği olan, uçtan uca güvenli bir platform sunabilir hale geldik.

3. Geliştiriciler İçin En Büyük Kazanımlarımız

A. Sıfır JavaScript Şişkinliği ve 100 Lighthouse Skoru

React Server Components sayesinde sayfanın statik kısımları istemciye (client) sıfır JavaScript yüküyle ulaşıyor. Tarayıcıya yalnızca etkileşimli bileşenlerin (menü, filtre, form) JS paketi gönderiliyor. Sonuç: Mobilde 0.8 saniyede açılan sayfalar ve sürekli yeşil yanan Core Web Vitals göstergeleri.

B. Müşterinin Bozamayacağı Tip-Güvenli (Type-Safe) Yönetim Paneli

TipTap zengin metin editörünü ve Tailwind Typography bileşenlerini kendi yönetim panelimize entegre ettik. Müşteri başlık, paragraf veya görsel eklediğinde sistem doğrudan temiz HTML/AST üretir; fontları patlatamaz, responsive düzeni bozamaz.

C. Arama Zekasını (SEO) Kod Seviyesine İndirmek

SEO'yu sonradan kurulan bir eklenti olmaktan çıkardık. Panelde yazı veya hizmet kaydedildiği an;

  • @graph bağlantılı JSON-LD şemaları,
  • Dinamik sitemap.xml ve robots.txt çıktıları,
  • 25+ anlamsal okunabilirlik ve arama kuralı

arka planda derlenir ve veritabanı şemasına doğrudan işlenir.

Karşılaştırma: WordPress Monoliti vs. Next.js Ajans Mimarisi

Parametre Eski WordPress Modeli Renklisayfa Next.js Mimarisi
Bileşen Mimarisi Karışık PHP include'ları ve tema dosyaları Modüler, tip güvenli React Server Components
Sayfa Ağırlığı ~2.5 MB – 5 MB (Gereksiz CSS/JS) ~150 KB – 350 KB temiz asset
Güvenlik Riski Yüksek (SQL Injection, eklenti açıkları) Sıfıra yakın (Statik derleme + kapalı API rotaları)
Bakım İhtiyacı Haftalık eklenti/PHP güncelleme takibi Sıfır bakım; deploy et ve unut mimarisi
İlk Yanıt Süresi (TTFB) 600ms – 1.800ms (PHP render gecikmesi) <100ms (Optimize sunucu önbelleği)

500+ Projenin Ardından Geliştiricilere Tavsiyeler

Eğer bir ajans kuruyorsanız, kurumsal müşterilere web geliştiriyorsanız veya freelance çalışıyorsanız:

  1. Hazır Tema Tuzağına Düşmeyin: Hazır şablonlar ilk hafta 10 saat kazandırır, sonraki 2 yılda bakım ve performans krizleriyle 200 saatinizi çalar.
  2. Kendi Çekirdek Bileşenlerinizi (UI Kit) Oluşturun: Tailwind ve React ile kendi servis kartlarınızı, navigasyonunuzu ve formlarınızı bir kez sağlam yazın, her projede yeniden kullanın.
  3. SEO ve Performansı Mimariye Gömün: Arama motoru optimizasyonunu pazarlamanın işi olarak görmeyin; TTFB'den JSON-LD şemasına kadar her şey bir backend ve frontend mühendisliği konusudur.

Renklisayfa olarak 20 yıllık ajans serüvenimizin en büyük dönüm noktası, hazır şablonların konfor alanından çıkıp modern yazılım mühendisliğini ajans standartımız haline getirmek oldu.

Top comments (0)