Next.js, Capacitor ve Electron: Tek Kod Tabanı ile Çoklu Platform
Günümüzde bir dijital ürün geliştirirken sadece web tarayıcılarında var olmak yetersiz kalabiliyor. Kullanıcılar uygulamalarınıza telefonlarından (Android/iOS) erişmek, hatta masaüstünde (Windows/macOS) kesintisiz bir performansla çalıştırmak istiyorlar. Her platform için ayrı dillerde (Java/Kotlin, Swift, C#) yerel uygulamalar yazmak ise küçük stüdyolar için hem zaman hem de bütçe açısından yıkıcıdır. Polimelo stüdyosu olarak bu problemi çözmek için modern bir hibrit mimari kullanıyoruz: React/Next.js, Capacitor.js ve Electron entegrasyonu.
Teknolojik Mimari
Sistemimizin merkezinde, kullanıcı arayüzünü (UI) ve tüm iş mantığını (business logic) yöneten tek bir Next.js projesi yer alıyor. Bu projeyi üç farklı platforma şu şekilde dağıtıyoruz:
- Web: Next.js'in
output: 'export'özelliğini kullanarak statik HTML/JS/CSS dosyaları üretiyoruz. Bu çıktıları Cloudflare Pages veya Vercel üzerinde küresel olarak çok hızlı dağıtabiliyoruz. - Mobil (Android): Capacitor.js yardımıyla statik web çıktımızı alıp yerel bir Android projesinin (WebView) içerisine gömüyoruz. Capacitor, web kodumuzun telefonun yerel API'lerine (bildirimler, dosya sistemi vb.) erişmesini sağlayan köprüler kuruyor.
- Masaüstü (Desktop): Electron kullanarak statik çıktımızı Chromium ve Node.js tabanlı masaüstü uygulamasına dönüştürüyoruz. Bu sayede oyunumuz Syncron, Steam'de yerel bir oyun gibi çalışabiliyor.
Next.js ve Static Export Zorlukları
Next.js varsayılan olarak sunucu taraflı çalışmaya (SSR - Server Side Rendering) odaklanır. Ancak mobil ve masaüstü paketleyiciler (Capacitor/Electron) bir Node.js sunucusuna sahip olmadıkları için tamamen statik dosyalara ihtiyaç duyarlar. Bu yüzden Next.js projemizde dinamik sunucu rotalarından kaçınmamız gerekti. Dinamik sayfalarımız (örneğin bu blog yazısının detayı olan /blog/[slug]) için derleme aşamasında tüm sayfaları HTML olarak üreten generateStaticParams fonksiyonunu kullandık.
Çoklu Platformda Veri Paylaşımı ve Offline Desteği
Diğer bir büyük sorun ise yerel veritabanı yönetimiydi. Tarayıcıda verileri saklamak kolaydır, ancak uygulama kapandığında veya internet kesildiğinde mobil ve masaüstünde verilerin korunması gerekir. Bu sorunu Dexie.js (IndexedDB wrapper) kullanarak çözdük. IndexedDB, hem modern tarayıcılarda hem Capacitor WebView içinde hem de Electron ortamında standart olarak desteklendiği için tek bir kod yazarak tüm platformlarda yerel, çevrimdışı çalışan (Offline-First) bir veritabanı kurmuş olduk. Cihaz internete bağlandığında ise Firebase Firestore ile senkronizasyon tetikleniyor.
Eğer siz de ürünlerinizi hızlıca tüm cihazlara ulaştırmak isteyen bağımsız bir geliştiriciyseniz; Next.js + Capacitor + Electron üçlüsü, kod tekrarını sıfırlayan ve ürün geliştirme hızınızı 3 katına çıkaran mükemmel bir tercihtir.