The latest articles on DEV Community by Renklisayfa (@renklisayfa). https://dev.to/renklisayfa https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4089927%2F112333c3-895e-4c0a-8097-5c294873dc9e.png https://dev.to/renklisayfa en Renklisayfa Sat, 22 Aug 2026 16:11:19 +0000 https://dev.to/renklisayfa/500-projeden-sonra-wordpressi-neden-biraktik-bir-web-ajansinin-nextjs-mimarisine-gecisi-2jne https://dev.to/renklisayfa/500-projeden-sonra-wordpressi-neden-biraktik-bir-web-ajansinin-nextjs-mimarisine-gecisi-2jne <h1> 500+ Projeden Sonra WordPress'i Neden Bıraktık? Bir Web Ajansının Next.js Mimarisine Geçişi </h1> <p>Ajans dünyasında çalışan her web geliştiricisi şu kabusu en az bir kez yaşamıştır:</p> <p>Pazartesi sabahı ajansa gelirsiniz, bir müşteriden acil e-posta düşer: <em>"Sitemiz beyaz ekran veriyor!"</em> Panelde yapılan otomatik bir WooCommerce veya form eklentisi güncellemesi, PHP sürümüyle çakışmış ve tüm siteyi kilitlemiştir. </p> <p>Sayfa açılış hızını ölçersiniz: Mobil Lighthouse skoru <strong>28</strong>. 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.</p> <p>2006'dan bu yana Ankara merkezli olarak 500'ün üzerinde kurumsal web projesi geliştiren <a href="https://www.renklisayfa.com" rel="noopener noreferrer">Renklisayfa</a> ekibi olarak, yıllar boyunca biz de bu monolitik şablon ekosisteminin tüm aşamalarından geçtik. </p> <p>Ancak bir noktada şu soruyu sormak zorunda kaldık: <strong>Müşterilerimize her ay bozulan şablonlar teslim etmek yerine, neden gerçek bir yazılım mühendisliği altyapısı sunmuyoruz?</strong></p> <p>İş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.</p> <h2> 1. Bizi WordPress'ten Kaçıran 3 Kronik Sorun </h2> <p>Geliştirici gözüyle baktığımızda geleneksel monolitik CMS'lerin sürdürülemez hale gelmesinin 3 temel sebebi vardı:</p> <ul> <li> <strong>Eklenti Bağımlılığı ve Güvenlik Açıkları:</strong> 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.</li> <li> <strong>Korkunç Core Web Vitals Skorları:</strong> 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.</li> <li> <strong>Kırılgan Yönetim Paneli:</strong> Müşteriye panel teslim ettiğinizde bir satır metin değiştirmek isterken tüm sayfa düzenini bozabiliyordu.</li> </ul> <h2> 2. Kurduğumuz Modern Ajans Yığını (Tech Stack) </h2> <p>Şablon sistemleri çöpe attıktan sonra kurumsal web projelerimiz için belirlediğimiz modern geliştirme yığını:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[Frontend / Render Katmanı] → Next.js (App Router) + React 19 + Tailwind CSS [Veri &amp; ORM Katmanı] → Prisma ORM + PostgreSQL / MySQL [Zengin Metin Editörü] → TipTap (ProseMirror tabanlı headless editor) [Performans &amp; Önbellek] → React Server Components (RSC) + React.cache() [Arama Zekası &amp; Şema] → Yerleşik @graph JSON-LD &amp; Gerçek Zamanlı Kural Motoru </code></pre> </div> <p>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.</p> <h2> 3. Geliştiriciler İçin En Büyük Kazanımlarımız </h2> <h3> A. Sıfır JavaScript Şişkinliği ve 100 Lighthouse Skoru </h3> <p>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.</p> <h3> B. Müşterinin Bozamayacağı Tip-Güvenli (Type-Safe) Yönetim Paneli </h3> <p>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.</p> <h3> C. Arama Zekasını (SEO) Kod Seviyesine İndirmek </h3> <p>SEO'yu sonradan kurulan bir eklenti olmaktan çıkardık. Panelde yazı veya hizmet kaydedildiği an;</p> <ul> <li> <code>@graph</code> bağlantılı JSON-LD şemaları,</li> <li>Dinamik <code>sitemap.xml</code> ve <code>robots.txt</code> çıktıları,</li> <li>25+ anlamsal okunabilirlik ve arama kuralı</li> </ul> <p>arka planda derlenir ve veritabanı şemasına doğrudan işlenir.</p> <h2> Karşılaştırma: WordPress Monoliti vs. Next.js Ajans Mimarisi </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Parametre</th> <th>Eski WordPress Modeli</th> <th>Renklisayfa Next.js Mimarisi</th> </tr> </thead> <tbody> <tr> <td><strong>Bileşen Mimarisi</strong></td> <td>Karışık PHP include'ları ve tema dosyaları</td> <td>Modüler, tip güvenli React Server Components</td> </tr> <tr> <td><strong>Sayfa Ağırlığı</strong></td> <td>~2.5 MB – 5 MB (Gereksiz CSS/JS)</td> <td>~150 KB – 350 KB temiz asset</td> </tr> <tr> <td><strong>Güvenlik Riski</strong></td> <td>Yüksek (SQL Injection, eklenti açıkları)</td> <td>Sıfıra yakın (Statik derleme + kapalı API rotaları)</td> </tr> <tr> <td><strong>Bakım İhtiyacı</strong></td> <td>Haftalık eklenti/PHP güncelleme takibi</td> <td>Sıfır bakım; deploy et ve unut mimarisi</td> </tr> <tr> <td><strong>İlk Yanıt Süresi (TTFB)</strong></td> <td>600ms – 1.800ms (PHP render gecikmesi)</td> <td>&lt;100ms (Optimize sunucu önbelleği)</td> </tr> </tbody> </table></div> <h2> 500+ Projenin Ardından Geliştiricilere Tavsiyeler </h2> <p>Eğer bir ajans kuruyorsanız, kurumsal müşterilere web geliştiriyorsanız veya freelance çalışıyorsanız:</p> <ol> <li> <strong>Hazır Tema Tuzağına Düşmeyin:</strong> Hazır şablonlar ilk hafta 10 saat kazandırır, sonraki 2 yılda bakım ve performans krizleriyle 200 saatinizi çalar.</li> <li> <strong>Kendi Çekirdek Bileşenlerinizi (UI Kit) Oluşturun:</strong> 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.</li> <li> <strong>SEO ve Performansı Mimariye Gömün:</strong> 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.</li> </ol> <p><a href="https://www.renklisayfa.com" rel="noopener noreferrer">Renklisayfa</a> 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.</p> architecture nextjs webdev wordpress