dotCREA
TREN

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.

MüşteriSailplus Yelken Akademisi · sailplus.org
SektörEğitim ve turizm — yelken eğitimi, mavi yolculuk, yat yarışları
PlatformNext.js 16 — özel geliştirme, Vercel ve Cloudflare KV/R2
Yıl2026
KapsamWordPress → Next.js, Özel tasarım, Yönetim paneli, Çok dilli yapı (TR/EN), Teknik SEO, Video ve galeri
2
Dil: Türkçe ve İngilizce, her sayfanın karşılığı var
129
Fotoğraf, dört albümde
20
Taşınan ve yeni yazılan blog yazısı
12
Dikey kursiyer görüşü videosu

Çö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.
Sailplus ana sayfası, masaüstü görünüm
Ana sayfa — video arka planlı hero ve sertifika vurgusu

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.
Altı kademeli yelken eğitimi müfredat sayfası
Eğitim içeriği — altı kademeli müfredat, panelden düzenleniyor

Ç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.
Sezonlara göre plan ve fiyat tablosu
Plan ve fiyat — sezonlara göre fiyat tablosu

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.
Dört kategorili 129 fotoğraflık albüm sayfası
Albüm — dört kategori, 129 fotoğraf

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.

Süreç
1. aşama
WordPress sitesinin içerik ve URL envanteri, bilgi mimarisi
2. aşama
Özel tasarım ve Next.js altyapısının kurulması
3. aşama
İçerik ve görsel taşıma, yönlendirmeler
4. aşama
Yönetim paneli (Cloudflare KV/R2) ve İngilizce sürüm
5. aşama
Teknik SEO, yapısal veri, video ve galeri optimizasyonu; yayın
Teknik künye
Next.js 16React 19TypeScriptTailwind CSS v4VercelCloudflare KVCloudflare R2JWT (jose)JSON-LDH.264/MP4 videoWordPress geçişi

Mobil arayüz

Ana sayfa mobil görünümü
Ana sayfa — mobil
Dikey kursiyer görüşü videoları, mobil görünüm
Kursiyer görüşleri — dikey video carousel'i