MEF Üniversitesi Headless Dönüşümü: DatoCMS + Next.js Case Study

Türkiye'nin önde gelen vakıf üniversitelerinden MEF Üniversitesi, dijital dönüşüm yolculuğunda cesur bir adım atarak WordPress altyapısını modern bir headless mimariye taşıdı. Bu case study'de, projenin teknik detaylarını, karşılaşılan zorlukları ve elde edilen sonuçları paylaşıyoruz.

Proje Özeti: Eski Sistem vs Yeni Sistem

WordPress Döneminin Zorlukları

MEF Üniversitesi'nin mevcut WordPress sitesi, yıllar içinde büyük bir teknik borç biriktirmişti. Yüzlerce eklenti, karmaşık tema yapısı ve monolitik mimari, her güncellemeyi bir kabus haline getiriyordu. Özellikle 7 farklı fakülte ve enstitünün kendine özgü içerik ihtiyaçları, tek bir WordPress kurulumu üzerinden yönetilmeye çalışılıyordu.

Eski sistemin temel sorunları:

• Sayfa yükleme süreleri 4-6 saniye aralığındaydı
• Mobil deneyim yetersiz kalıyordu
• İçerik editörleri için karmaşık bir yönetim paneli vardı
• Çok dilli içerik yönetimi WPML ile sorunluydu
• Güvenlik güncellemeleri risk taşıyordu

Yeni Sistemin Vizyonu

Headless dönüşümle birlikte, içerik yönetimi ve sunum katmanı tamamen ayrıştırıldı. DatoCMS üzerinden yönetilen içerikler, Next.js 14 ile oluşturulan modern bir frontend üzerinden sunulmaya başlandı. Bu ayrışma, her iki tarafın da bağımsız olarak optimize edilmesine olanak tanıdı.

Yeni sistemin getirdiği avantajlar:

• Sayfa yükleme süreleri 1 saniyenin altına düştü
• Gerçek zamanlı önizleme ile içerik yönetimi kolaylaştı
• Modüler sayfa yapısı ile esneklik arttı
• TypeScript ile tip güvenli geliştirme ortamı sağlandı

Neden Headless? Karar Süreci

Headless mimariye geçiş kararı, uzun bir değerlendirme sürecinin ardından alındı. Bu süreçte farklı yaklaşımlar masaya yatırıldı.

Değerlendirilen Alternatifler

WordPress Tema Yenileme: Mevcut WordPress altyapısı üzerinde modern bir tema geliştirmek düşünüldü. Ancak performans sınırlamaları ve ölçeklenebilirlik endişeleri bu seçeneği eledi.

Full Custom CMS: Sıfırdan özel bir CMS geliştirmek de değerlendirildi. Bakım maliyetleri ve geliştirme süresi nedeniyle bu seçenekten vazgeçildi.

Headless CMS + Modern Frontend: İçerik yönetimi için battle-tested bir CMS, sunum için ise performans odaklı bir framework kullanmak en mantıklı seçenek olarak öne çıktı.

Headless Mimarinin Üniversiteler İçin Avantajları

Üniversiteler, farklı departmanların farklı içerik ihtiyaçlarına sahip olduğu karmaşık organizasyonlardır. Headless mimari bu karmaşıklığı yönetmek için ideal bir çözüm sunuyor.

İçerik Takımları İçin: Editörler, teknik detaylarla uğraşmadan içerik üretebiliyor. DatoCMS'in sezgisel arayüzü, WordPress'e alışkın kullanıcılar için bile hızlı bir adaptasyon süreci sağlıyor.

Geliştirme Takımları İçin: Frontend geliştiriciler, backend kısıtlamalarından bağımsız olarak en güncel teknolojileri kullanabiliyor. Yeni özellikler eklemek, mevcut sistemi bozmadan yapılabiliyor.

IT Yönetimi İçin: Güvenlik güncellemeleri daha az riskli hale geliyor. Frontend ve backend bağımsız olarak güncellenebiliyor.

Tech Stack Seçimi

Teknoloji seçimi, projenin uzun vadeli başarısı için kritik öneme sahipti. Her bir bileşen, belirli ihtiyaçları karşılamak üzere özenle seçildi.

DatoCMS: İçerik Yönetiminin Kalbi

DatoCMS'i tercih etmemizin birkaç temel nedeni vardı. İlk olarak, GraphQL-first yaklaşımı sayesinde sadece ihtiyaç duyulan verileri çekebiliyoruz. Bu, özellikle karmaşık sayfa yapılarında büyük performans avantajı sağlıyor.

DatoCMS'in projede kullandığımız özellikleri:

• Modular Content: Her sayfa, farklı blok türlerinden oluşan modüler bir yapıya sahip. Hero section, accordion, image gallery gibi bloklar CMS'te tanımlanıyor ve frontend'de dinamik olarak render ediliyor.
• Localization: Türkçe ve İngilizce içerikler aynı arayüzden yönetiliyor. Her alan için fallback dil tanımlanabiliyor.
• Real-time Preview: İçerik editörleri, değişiklikleri yayınlamadan önce canlı olarak görebiliyor.
• Image Optimization: DatoCMS'in imgix entegrasyonu sayesinde görseller otomatik olarak optimize ediliyor.

Next.js 14: App Router ile Modern Frontend

Next.js 14'ün App Router özelliği, bu projede tam potansiyeliyle kullanıldı. Server Components sayesinde JavaScript bundle boyutu minimumda tutulurken, etkileşimli bileşenler için Client Components tercih edildi.

Projede kullanılan Next.js özellikleri:

Server Components: Sayfa içeriklerinin büyük çoğunluğu server'da render ediliyor. Bu, ilk sayfa yüklemesini dramatik biçimde hızlandırıyor.

Dynamic Routes: Catch-all routes sayesinde CMS'ten gelen herhangi bir sayfa yapısı desteklenebiliyor. /[lang]/[[...slug]]/page.tsx yapısı, sınırsız derinlikte sayfa hiyerarşisi oluşturmaya olanak tanıyor.

Middleware: Dil algılama, subdomain routing ve redirect işlemleri middleware katmanında yönetiliyor. Bu sayede edge'de çalışan hızlı bir routing mekanizması elde edildi.

Metadata API: SEO meta tag'leri DatoCMS'ten çekilip Next.js'in Metadata API'si ile entegre ediliyor. Her sayfanın kendi SEO ayarları olabiliyor.

GraphQL: Tip Güvenli Veri Katmanı

GraphQL, bu projede sadece bir veri çekme aracı olmanın ötesinde, tüm geliştirme sürecini şekillendiren bir omurga görevi görüyor. GraphQL Codegen sayesinde, DatoCMS şemasından otomatik olarak TypeScript tipleri üretiliyor.

Fragment-based Query Yapısı: Her bileşenin ihtiyaç duyduğu veriler, kendi fragment'ı içinde tanımlanıyor. Bu yaklaşım, bileşenlerin bağımsızlığını korurken, sorguların optimize edilmesini sağlıyor.

Request Deduplication: Aynı sorgunun birden fazla kez çalışmasını önlemek için React'in cache fonksiyonu kullanılıyor. Bu, özellikle nested component yapılarında gereksiz API çağrılarını engelliyor.

Destekleyici Teknolojiler

Tailwind CSS: Utility-first yaklaşımı ile tutarlı ve bakımı kolay bir stil sistemi oluşturuldu. Tailwind'in container queries eklentisi, responsive tasarımda ek esneklik sağladı.

Radix UI: Erişilebilirlik standartlarına uygun, headless UI bileşenleri kullanıldı. Accordion, dialog, navigation menu gibi kompleks etkileşimler Radix ile implement edildi.

Framer Motion: Sayfa geçişleri ve mikro animasyonlar için Framer Motion tercih edildi. Performansı etkilemeden zengin bir görsel deneyim sunuluyor.

Zod: Runtime validation için Zod kullanılıyor. API yanıtlarının beklenen formatta olduğu doğrulanıyor.

Çok Dilli Yapı: i18n Implementasyonu

Bir üniversite sitesi için çok dilli destek zorunluluktur. MEF Üniversitesi'nin uluslararası öğrenci ve akademisyen kitlesi düşünüldüğünde, Türkçe ve İngilizce desteği kritik öneme sahipti.

URL Yapısı ve Locale Routing

Dil bilgisi URL'in ilk segmentinde yer alıyor. /tr/hakkimizda ve /en/about gibi yapılar, hem kullanıcı deneyimi hem de SEO açısından en iyi pratik olarak değerlendirildi.

Middleware ile Otomatik Dil Algılama: Kullanıcı siteye ilk kez geldiğinde, tarayıcı dil tercihlerine göre otomatik yönlendirme yapılıyor. negotiator ve @formatjs/intl-localematcher kütüphaneleri bu işlevi sağlıyor.

Fallback Mekanizması: Bir içerik istenilen dilde mevcut değilse, varsayılan dile (Türkçe) düşülüyor. Bu sayede eksik çevirilerin kullanıcı deneyimini olumsuz etkilemesi engelleniyor.

İçerik Çevirisi Stratejisi

DatoCMS'in localization özelliği, her alan için bağımsız çeviri imkanı sunuyor. Bazı alanlar (örneğin slug) tüm dillerde aynı kalırken, başlık ve açıklama gibi alanlar dil bazında farklılaşabiliyor.

Statik Metinler: UI elementlerindeki sabit metinler için bir dictionary sistemi kuruldu. Her dil için tanımlanan key-value çiftleri, ilgili dil için yükleniyor.

CMS İçerikleri: Dinamik içerikler DatoCMS'ten locale parametresi ile çekiliyor. GraphQL sorgularında locale ve fallbackLocales parametreleri kullanılıyor.

Fakülte Alt Siteleri: Dinamik Routing Mimarisi

MEF Üniversitesi'nin 7 fakültesi ve enstitüsü, her biri kendine özgü içerik ve tasarım ihtiyaçlarına sahip. Bu çeşitliliği tek bir kod tabanında yönetmek, projenin en zorlu yönlerinden biriydi.

Fakülte Yapılandırma Sistemi

Her fakülte için merkezi bir yapılandırma dosyası oluşturuldu. Bu dosya, fakültenin GraphQL sorgularını, renk şemasını ve diğer özelleştirmelerini barındırıyor.

Desteklenen Fakülteler:

• Eğitim Fakültesi
• Hukuk Fakültesi
• İktisadi, İdari ve Sosyal Bilimler Fakültesi
• Mühendislik Fakültesi
• Lisansüstü Eğitim Enstitüsü
• Yabancı Diller Yüksekokulu

Her fakültenin kendi ana sayfası, duyuru sayfası ve alt sayfaları bulunuyor. URL yapısı /fakulteler/[fakulte-slug]/[sayfa-slug] şeklinde organize edildi.

Dinamik Renk Sistemi

Her fakültenin kendine özgü bir kurumsal rengi var. Bu renkler CMS'te tanımlanıyor ve CSS custom properties aracılığıyla frontend'e aktarılıyor. Bu yaklaşım, yeni bir fakülte eklendiğinde kod değişikliği gerektirmeden renk şeması tanımlanabilmesini sağlıyor.

Subdomain Mimarisi

Ana üniversite sitesinin yanı sıra, kütüphane ve aday öğrenci portalı gibi alt siteler subdomain'ler üzerinden sunuluyor. Middleware katmanında subdomain algılama yapılıyor ve ilgili içerik servisleniyor.

library.mef.edu.tr: Kütüphane kaynakları ve hizmetleri için özel bir deneyim sunuluyor.

aday.mef.edu.tr: Aday öğrenciler için özelleştirilmiş bir portal. Başvuru süreçleri ve tanıtım içerikleri burada yer alıyor.

Performans Metrikleri

Headless dönüşümün en somut sonuçları performans metriklerinde görüldü. Google PageSpeed Insights skorları dramatik biçimde iyileşti.

Önceki ve Sonraki Karşılaştırması

Performans Optimizasyonları

Bu sonuçlara ulaşmak için çeşitli optimizasyonlar uygulandı.

Görsel Optimizasyonu: DatoCMS'in imgix entegrasyonu sayesinde görseller otomatik olarak WebP formatına dönüştürülüyor, boyutlandırılıyor ve CDN üzerinden sunuluyor. Responsive images ile her cihaza uygun boyut servisleniyor.

JavaScript Bundle Optimizasyonu: Server Components kullanımı sayesinde client-side JavaScript minimumda tutuldu. Sadece interaktif bileşenler için JavaScript gönderiliyor.

Edge Caching: Vercel'in edge network'ü üzerinde agresif caching stratejileri uygulandı. Statik sayfalar edge'de cache'leniyor, dinamik içerikler için ISR kullanılıyor.

Font Optimizasyonu: Custom fontlar self-hosted olarak sunuluyor ve font-display: swap stratejisi ile yükleniyor.

Öğrenilen Dersler

Her büyük proje gibi, bu dönüşüm süreci de değerli derslerle doluydu.

Ne İyi Gitti

Erken Prototipleme: Teknik seçimler yapılmadan önce küçük ölçekli prototipler oluşturuldu. Bu, potansiyel sorunların erken aşamada tespit edilmesini sağladı.

Modüler Yaklaşım: Page builder mantığı, içerik ekibinin özgürce sayfa oluşturmasına olanak tanıdı. Geliştirme ekibi yeni blok türleri eklerken mevcut yapıyı bozmadı.

Type Safety: GraphQL Codegen ile sağlanan tip güvenliği, runtime hatalarını büyük ölçüde azalttı. Refactoring işlemleri güvenle yapılabildi.

Zorluklar ve Çözümler

Legacy URL Redirect'leri: WordPress'ten gelen binlerce URL'in yeni yapıya yönlendirilmesi gerekiyordu. Middleware'de kapsamlı bir redirect haritası oluşturuldu.

İçerik Migrasyonu: Mevcut içeriklerin DatoCMS'e aktarılması manuel bir süreç gerektirdi. DatoCMS'in API'si ile bulk import script'leri yazıldı.

Editör Eğitimi: İçerik ekibinin yeni sisteme adaptasyonu zaman aldı. Detaylı dokümantasyon ve video eğitimler hazırlandı.

Sonuç

MEF Üniversitesi'nin headless dönüşümü, modern web geliştirme pratiklerinin kurumsal ölçekte nasıl uygulanabileceğinin güçlü bir örneği oldu. DatoCMS'in esnek içerik modelleme yetenekleri ile Next.js 14'ün performans odaklı yaklaşımı birleştiğinde, hem içerik yöneticileri hem de son kullanıcılar için üstün bir deneyim ortaya çıktı.

Temel çıkarımlar:

• Headless mimari, karmaşık içerik gereksinimlerini yönetmek için ideal
• GraphQL + TypeScript kombinasyonu, güvenilir bir geliştirme deneyimi sunuyor
• Modüler sayfa yapısı, içerik ekiplerine özgürlük tanıyor
• Performans iyileştirmeleri, kullanıcı deneyimini doğrudan etkiliyor

Üniversiteniz veya kurumunuz için benzer bir dijital dönüşüm mü planlıyorsunuz? Projeler sayfamızda MEF Üniversitesi projesinin detaylarını inceleyebilir, headless CMS teknolojileri hakkında daha fazla bilgi edinebilir veya Next.js çözümlerimizi keşfedebilirsiniz. Ücretsiz danışmanlık için bizimle iletişime geçin.