Sailplus: WordPress'ten Next.js'e geçiş ve yönetim panelli çok dilli yelken akademisi sitesi
Sailplus, Göcek ve Marmaris çıkışlı haftalık yelken eğitimleri düzenleyen bir yelken akademisi. Eski sitesi WordPress üzerindeydi. Eklentiler yüzünden site yavaştı, güncellemeler sorun çıkarıyordu ve tasarım markanın denizle ilgili kimliğini yansıtmıyordu. Siteyi Next.js ile sıfırdan kurduk. Ekibin içerikleri teknik destek olmadan güncelleyebilmesi için kendi yönetim panelini de yazdık.
Çözdüğümüz problem
- WordPress, tema ve eklenti yığını yüzünden yavaştı; her güncelleme bir şeyin bozulma riskini taşıyordu.
- Mobil deneyim zayıftı; eğitim programı, fiyatlar ve iletişim bilgileri kolay bulunmuyordu.
- İngilizce içerik yoktu ya da dağınıktı; yabancı kursiyerlere hitap edilemiyordu.
- Fotoğraf ve videolar optimize edilmemişti; galeri ve tanıtım videoları sayfaları ağırlaştırıyordu.
- Yapısal veri eksikti; arama sonuçlarında eğitim, SSS ve eğitmen bilgileri öne çıkmıyordu.
Hedefimiz
- Sayfaların statik üretilip CDN'den servis edildiği hızlı ve bakım gerektirmeyen bir altyapı kurmak.
- Mevcut içerikleri ve URL'leri kaybetmeden yeni yapıya taşımak.
- Hero, SSS, fiyatlar, galeri ve blog gibi içeriklerin ekip tarafından kolayca düzenlenebilmesini sağlamak.
- Siteyi Türkçe ve İngilizce olarak eşit kapsamda yayınlamak.
- Arama motorlarında eğitim, eğitmen ve SSS içeriklerinin zengin sonuçla görünmesini sağlamak.
WordPress'ten geçiş
- Sayfa içerikleri, blog yazıları ve görseller WordPress'ten alınıp yeni yapıya uyarlandı.
- Blog yazıları kod içinde tanımlanan, sabit slug'lı bir yapıya taşındı; URL'ler korundu.
- Değişen adresler kalıcı (301) yönlendirmeyle yeni sayfalara bağlandı; örneğin eski eğitmen sayfası.
- Görseller yeniden boyutlandırılıp düzenli, okunabilir dosya adlarıyla yeniden yerleştirildi.
- WordPress'in veritabanı, eklenti ve tema bağımlılıkları tamamen ortadan kalktı.
Yönetim paneli
- Panel oturum açmayı gerektiriyor; oturumlar JWT ile, şifreler Web Crypto PBKDF2 ile korunuyor.
- Anasayfa hero'su, bento alanı, SSS, plan ve fiyatlar, eğitim müfredatı, eğitmen sayfası, yat yarışları, galeri, Instagram ve blog panelden düzenlenebiliyor.
- İçerikler Cloudflare KV'de, medya dosyaları Cloudflare R2'de saklanıyor.
- Panelde değişiklik yapılmamış alanlar kod içindeki varsayılan içeriği kullanıyor; böylece site hiçbir zaman boş bir alan göstermiyor.
- Kaydedilen değişiklikler, yeni bir deploy gerekmeden belirli aralıklarla sayfalara yansıyor.
Çok dilli yapı
- Türkçe sayfalar kök dizinde, İngilizce sayfalar /en altında yayında: eğitim programı, fiyatlar, eğitmen, tekne, galeri, blog ve yarışlar.
- Dil değiştirildiğinde ziyaretçi aynı sayfanın diğer dildeki karşılığında kalıyor.
- Blog yazılarının İngilizce çevirileri ve albüm açıklamaları eklendi.
Teknik SEO ve yapısal veri
- Tüm sayfalarda ortak bir metadata katmanı var: başlık, açıklama, canonical ve Open Graph tek yerden üretiliyor.
- Organization, LocalBusiness ve WebSite şemaları sitenin her sayfasına ekleniyor.
- Sayfa türüne göre ek şemalar kullanılıyor: BreadcrumbList, FAQPage, Course, Service, BlogPosting, ImageGallery, VideoObject ve Person (EducationalOccupationalCredential ile).
- Site haritası otomatik üretiliyor; robots dosyası yönetim ve API yollarını taramaya kapatıyor.
- Build sonrasında sayfaların neredeyse tamamı statik olarak üretiliyor.
Video, galeri ve performans
- Hero videosu 720p'ye düşürüldü ve sesi kaldırıldı; boyutu yaklaşık %72 azaldı.
- Animasyonlar GIF yerine MP4 olarak, otomatik ve sessiz oynatılıyor.
- Kursiyer görüşleri dikey (9:16) bir video carousel'inde gösteriliyor; en yeni video en başta. Videolar 720×1280 H.264 olarak, hızlı başlatmaya uygun kodlandı ve her biri için poster karesi var.
- Dört albüm (eğitim, ekipler, koylar, yarışlar) ve büyütmeli görüntüleyiciyle 129 fotoğraflık galeri hazırlandı.
- Statik medya dosyaları bir yıllık, değişmez (immutable) önbellek başlığıyla servis ediliyor.
Mimari
- Uygulama: Next.js 16 App Router; varsayılan olarak Server Components, istemci tarafında yalnızca etkileşimli bileşenler çalışıyor.
- Barındırma: Vercel üzerinde, Cloudflare arkasında; Cloudflare Workers'a (OpenNext) taşınabilir yapıda.
- Veri: içerikler Cloudflare KV'de, medya R2'de; Vercel tarafından REST istemcileriyle erişiliyor.
- Stil: Tailwind CSS v4, Plus Jakarta Sans yazı tipi ve markaya özel deniz renk paleti.
Sonuç
Sailplus artık eklenti güncellemesi ve veritabanı bakımı gerektirmeyen bir siteye sahip. Sayfalar statik olarak üretilip CDN'den hızlıca açılıyor. Ekip hero, fiyatlar, SSS, galeri ve blog içeriklerini panelden kendisi güncelliyor. Site Türkçe ve İngilizce yayında; yapısal veri sayesinde eğitim, SSS ve eğitmen bilgileri arama motorlarında zengin sonuç olarak görünebiliyor. Yeni kursiyer videoları ve blog yazıları dakikalar içinde yayına alınabiliyor.





