Framer mı Next.js mi? Portfolyo, SaaS, E-ticaret ve Landing Page İçin 2026 Rehberi

Son kontrol: 27 Temmuz 2026. “Framer mı Next.js mi?” tek başına eksik bir soru. Çünkü bu soruyu portfolyosunu hazırlayan bir tasarımcı da soruyor, tek başına SaaS geliştiren biri de, ürünlerini internette satmak isteyen bir marka da. Üçünün aynı aracı seçmesi gerekmiyor.

En kısa cevabı baştan vereyim: Framer bir web sitesi oluşturma ve yayınlama aracı; Next.js ise kod yazarak web sitesi ve web uygulaması geliştirdiğiniz bir React framework’ü. Portfolyo, tanıtım sitesi veya kısa ömürlü bir kampanya için Framer çoğu zaman daha kısa yol. Üyelik, ödeme, kullanıcı paneli, veritabanı ve ürüne özel davranışlar varsa Next.js daha doğru zemin. Standart bir e-ticaret sitesi içinse bazen doğru cevap ikisi de değil, doğrudan Shopify olabilir.

Önce araçları tanıyalım

Framer nedir?

Framer, tarayıcıda çalışan görsel bir website builder. Figma’ya benzeyen bir canvas üzerinde sayfayı tasarlıyor, masaüstü ve mobil düzenlerini ayarlıyor, animasyon ekliyor ve aynı yerden yayınlıyorsunuz. Hosting, SSL, CDN, formlar, temel analitik, SEO ayarları ve CMS aynı ürünün içinde geliyor.

Buradaki önemli nokta şu: Framer yalnızca maket hazırladığınız bir tasarım programı değil. Canvas’ta yaptığınız çalışma canlı siteye dönüşüyor. Kod bilmeden kullanılabilir; gerektiğinde Code Component, plugin ve custom code ile genişletilebilir. Fakat kendi backend’inizi, veritabanı işlemlerinizi veya kapsamlı bir uygulama mimarisini Framer’ın içinde kurmuyorsunuz.

Next.js nedir?

Next.js, React üzerine kurulmuş açık kaynak bir framework. Sayfanın arayüzünü React component’leriyle yazarsınız; Next.js routing, server ve client rendering, veri çekme, cache, görsel/font optimizasyonu, API rotaları ve production build gibi parçaları düzenler. HTML, CSS, JavaScript ve React bilmek gerekir.

Next.js size hazır bir görsel editör, CMS veya hosting hesabı vermez. Bunları projeye göre seçersiniz. İçerik Markdown dosyalarında durabilir, Sanity gibi bir CMS’den gelebilir veya kendi yönetim panelinizden yönetilebilir. Uygulamayı Vercel’e, başka bir bulut sağlayıcısına ya da Coolify kurduğunuz kendi sunucunuza koyabilirsiniz.

Parça	Framer	Next.js
Asıl ürün	Görsel website builder + CMS + hosting	React tabanlı web uygulaması framework’ü
Nasıl çalışılır?	Canvas, component ve görsel kontroller	Kod, Git ve seçtiğiniz geliştirme araçları
Backend	Yerleşik form ve harici servis entegrasyonları	API, veritabanı, auth ve server logic kurulabilir
Yayınlama	Framer hosting’e tek tık	Vercel, Cloudflare, VPS veya başka bir host
Kodun sahipliği	Proje Framer platformunda yaşar	Repository ve kaynak kod sizdedir

Ne yapacağınıza göre kısa cevap

Proje	İlk bakacağım seçenek	Ne zaman diğerine geçerim?
Tasarımcı/fotoğrafçı portfolyosu	Framer	Portfolyonun kendisi kod yeteneğinizi göstermeliyse Next.js
Frontend geliştirici portfolyosu	Next.js	Kod yazmak yerine işlerinizi bu hafta yayına almak istiyorsanız Framer
Tek kişilik SaaS uygulaması	Next.js	Yalnızca ürünün tanıtım sitesini ayrı kuruyorsanız Framer da olabilir
Bekleme listesi / ürün doğrulama sayfası	Framer	Form ürün hesabı, ödeme veya özel backend akışına bağlanıyorsa Next.js
Blog ve içerik sitesi	İçeriğin yapısına bağlı	Basit yayın Framer; özel veri modeli ve otomasyon Next.js + CMS
Standart online mağaza	Shopify gibi commerce platformu	Özel storefront gerekiyorsa Framer + Shopify veya Next.js + Shopify
Kısa kampanya / etkinlik sayfası	Framer	Mevcut Next.js projesinde hazır component’ler varsa yeni route daha kolay olabilir

Portfolyo yapıyorsanız seçim mesleğinize göre değişir

Bir ürün tasarımcısı, fotoğrafçı, illüstratör veya art director için portfolyonun ana işi görsel anlatımdır. Proje kapaklarını, case study sayfalarını ve geçişleri kodla kurmak size ekstra bir değer kazandırmıyorsa Framer mantıklı. Hazır bir template’ten başlayıp tipografi, grid ve motion tarafını kendinize göre değiştirebilirsiniz. CMS ile yeni proje eklemek de kolaydır.

Frontend geliştirici veya creative developer portfolyosunda durum tersine dönebilir. Özel WebGL sahnesi, canlı kod örnekleri, deneysel etkileşimler veya kendi component sisteminiz portfolyonun bir parçasıysa Next.js yalnızca siteyi taşımaz; yaptığınız işin kanıtı olur. Ama sırf geliştiricisiniz diye üç hafta portfolyo altyapısı yazmak zorunda değilsiniz. Müşteri veya iş başvurusu için temiz bir siteye hemen ihtiyacınız varsa Framer kullanmak eksiklik değildir.

Tek başına SaaS geliştiriyorsanız iki farklı sayfayı ayırın

“SaaS yapıyorum” dediğinizde aslında iki ürün olabilir:

1. SaaS uygulamasının kendisi: kayıt olma, giriş, abonelik, kullanıcı paneli, veritabanı, e-posta, dosya yükleme ve uygulamaya özel iş kuralları.
2. SaaS’ın tanıtım sitesi: ana sayfa, özellikler, fiyatlandırma, blog, sık sorulan sorular ve demo talep formu.

İlkini Framer’da kurmaya çalışmazdım. Bu, Next.js’in doğal alanı. Supabase, PostgreSQL, Stripe, Auth.js veya tercih ettiğiniz başka servislerle gerçek bir uygulama geliştirebilirsiniz.

İkinci sayfa için iki doğru yol var. Tek başınıza geliştiriyorsanız ve ürün ile tanıtım sitesi aynı component’leri, kullanıcı durumunu veya ödeme verisini kullanacaksa hepsini Next.js’te tutmak işinizi kolaylaştırabilir. Ürünü kodlarken landing page’deki her küçük görsel ayarla uğraşmak istemiyorsanız www tarafını Framer’da, app tarafını Next.js’te çalıştırabilirsiniz.

Burada “ekip” sahibi olmanız gerekmiyor. Tek kişi için asıl soru zamanınızı nerede harcamak istediğiniz: ürün özelliği yazarken mi, yoksa tanıtım sayfasının component ve responsive detaylarını kodlarken mi? Kod yazmak sizin için hızlıysa Next.js’in maliyeti düşer. Görsel canvas’ta daha hızlıysanız Framer’ın aboneliği size zaman satın alır.

E-ticarette ikisini de tek başına mağaza altyapısı sanmayın

Framer ile ürün sayfaları tasarlanabilir ve Shopify verisi Framer CMS’e senkronlanabilir. Framer Marketplace’te Shopify ürünleri, varyantları, sepet ve checkout akışını bağlayan commerce plugin’leri var. Bu modelde Framer vitrindir; ürün, stok, sipariş ve ödeme altyapısı Shopify’dadır.

Next.js tarafında da durum benzer. Next.js mağazanın frontend’ini verir; katalog, stok, sipariş, vergi ve ödeme için Shopify, Medusa, Saleor veya başka bir commerce backend’i gerekir. Vercel’in Next.js Commerce starter’ı da Shopify ile çalışan bir storefront örneğidir.

Beş ürün satacağınız standart bir mağazada özel storefront kurmak gereksiz yük olabilir. Shopify theme ile başlamak daha basit. Marka deneyimi çok özel olacaksa, headless commerce gerçekten ihtiyaçsa veya mağaza ürününüzün bir parçasıysa Next.js daha fazla kontrol verir. Framer + Shopify ise tasarım özgürlüğü isteyen ama bütün storefront’u kodlamak istemeyen biri için orta yol olabilir.

Blog için “kaç yazı var?” kadar içerik modeli önemli

Framer CMS; blog, vaka çalışması, kaynak sayfası ve dizin gibi tekrar eden içerikleri koleksiyonlarla yönetiyor. Başlık, görsel, kategori, rich text ve SEO alanlarını tanımlayıp tek bir görsel template’e bağlayabilirsiniz. Küçük veya orta ölçekli bir yayın için başka CMS kurmadan çalışmak rahat.

Next.js’te blog dosya tabanlı olabilir veya bir headless CMS’e bağlanabilir. Sadece siz yazı yayımlıyorsanız MDX/Markdown şaşırtıcı derecede yeterli olabilir. İçerik birbiriyle ilişkili ürünler, yazarlar, dokümantasyon sürümleri, otomatik sayfalar veya uygulama verisiyle birleşiyorsa kod tarafındaki veri modeli daha anlamlı hale gelir.

Yani “blog varsa Framer, büyükse Next.js” diye sert bir sınır yok. Yazıyı nasıl gireceğiniz, içeriğin başka verilerle nasıl bağlanacağı ve ileride platformdan çıkmak isteyip istemediğiniz daha belirleyici.

Fiyat: abonelik ile framework lisansını karşılaştırmayın

Aşağıdaki rakamlar 27 Temmuz 2026’da resmî fiyat sayfalarında görünen yıllık ödeme seçeneklerine göre hazırlandı. Vergi, domain yenilemesi, premium template/plugin ve geliştirme süresi dahil değil.

Framer Free aylık 0 dolar ve Framer alan adıyla kullanılabilir. Özel alan adı gereken küçük bir site için Basic yıllık ödemede aylık 10 dolar, yani 120 dolar. Pro aylık 30 dolar, yani 360 dolar. İhtiyacınız olan CMS, bandwidth, locale ve editör özelliklerine göre plan değişebilir.

Next.js’in MIT lisansı için ödeme yok. Vercel Hobby aylık 0 dolardır ve kişisel, ticari olmayan kullanım içindir. Kişisel portfolyo bu sınırlar içinde ücretsiz kalabilir. Vercel Pro aylık 20 dolar, yani 240 dolar yıllık taban maliyet ve aylık 20 dolar kullanım kredisi sunuyor.

Vercel zorunlu değil. Coolify self-hosted ücretsizdir. Coolify Cloud iki sunucu bağlantısı için aylık 5 dolardan başlar; sunucuyu yine siz sağlarsınız. Hetzner’ın 15 Haziran 2026 sonrası Almanya/Finlandiya fiyatında CX23 aylık 5,49 euro, public IPv4 aylık 0,50 euro. Birlikte aylık 5,99 euro, yıllık 71,88 euro; vergi hariç.

Tek kişi çalışıyorsanız “geliştirme maliyeti sıfır” demek yine doğru değil. Para ödemeseniz de zaman harcıyorsunuz:

Gerçek ilk yıl maliyeti =
platform + hosting + domain
+ template, plugin ve harici servisler
+ kurulum için harcadığınız zaman
+ yıl içindeki değişiklikler
+ bakım veya başka platforma geçiş

Framer’da sunucu bakımıyla uğraşmazsınız fakat abonelik ve platform bağımlılığı vardır. Next.js’i ucuz bir VPS’e koyabilirsiniz fakat güvenlik güncellemesi, backup, izleme ve arıza sorumluluğu size geçer. Aylık faturası küçük olan seçenek her zaman en az zaman alan seçenek değildir.

SEO: Framer yetersiz değil, Next.js de otomatik üstün değil

Framer title, description, URL, alt text, redirect, index ayarları ve CMS metadata alanlarını yönetiyor; sitemap.xml ve robots.txt üretiyor. JSON-LD custom code ile eklenebiliyor. Localization kullanıldığında dil ve hreflang çıktıları da destekleniyor.

Next.js App Router; static metadata, generateMetadata, Open Graph görselleri, favicon, robots ve sitemap için programlanabilir API’ler veriyor. Bu özellikle yüzlerce ürün, lokasyon veya veri tabanlı sayfa üretirken güçlü. Ama canonical, schema veya locale kurallarını yanlış yazarsanız framework sizi otomatik kurtarmıyor.

Portfolyo ya da on sayfalık tanıtım sitesinde Framer’ın hazır kontrolleri çoğunlukla yeterli. Ürün verisinden binlerce özgün sayfa, çok özel canonical kuralları veya otomatik structured data üretecekseniz Next.js daha fazla kontrol verir. Google iki logodan birini seçmiyor; ortaya çıkan sayfanın içeriğine, yapısına ve kullanıcı deneyimine bakıyor.

Performans: aracı değil aynı sayfayı ölçün

Framer yayın sırasında sayfaları pre-render ediyor; CDN, cache, sıkıştırma, responsive görseller, AVIF, lazy loading ve font optimizasyonu sağlıyor. Next.js tarafında next/image, next/font, Server Components, cache ve static export ile çok hafif sayfalar üretilebilir.

İkisinde de sayfayı ağırlaştırmak kolay. Otomatik oynayan video, büyük görseller, üç farklı analytics aracı, chat widget’ı ve her bölümde scroll animation kullanırsanız Framer’ın hazır optimizasyonları yetmez. Next.js’te gereksiz Client Component, büyük npm paketleri ve kontrolsüz üçüncü taraf script’ler aynı sonucu verir.

Lighthouse faydalı bir laboratuvar testi ama platform karşılaştırması değildir. İki aracı gerçekten karşılaştıracaksanız aynı tasarımı, görselleri, fontları, videoyu, formu ve analytics script’lerini kullanmanız gerekir. Yayından sonra da Search Console, CrUX veya kendi RUM verinizi izlemelisiniz.

Ben hangi durumda ne seçerdim?

1. Görsel portfolyo: Framer. Kod portfolyosu veya deneysel web işi: Next.js.
2. Tek sayfalık ürün doğrulama: Framer. Hazır Next.js starter’ınız varsa onu kullanmak da mantıklı.
3. Tek kişilik SaaS ürünü: Uygulama Next.js. Tanıtım sitesi aynı repo içinde Next.js veya ayrı Framer olabilir.
4. Hizmet veren küçük işletme: Framer; rezervasyon ve ödeme için hazır servisleri bağlarım.
5. Standart mağaza: Önce Shopify. Özel vitrin gerekirse Framer + Shopify veya Next.js + Shopify.
6. İçerik ağırlıklı yayın: Basit yapı Framer; özel içerik modeli, otomasyon ve uygulama verisi varsa Next.js + CMS.
7. Üyelik, panel, veritabanı veya özel iş mantığı: Next.js.

Bu portfolyo Next.js üzerinde. Bunun nedeni Next.js’in her portfolyo için üstün olması değil; blog, iki dil, admin paneli, API rotaları ve deneysel özelliklerin aynı kod tabanında olması. Sadece proje görsellerimi ve hakkımda sayfasını yayınlayacak olsaydım Framer çok daha kısa bir yol olabilirdi.

Next.js seçerseniz etrafındaki araçları da bilinçli seçmek gerekiyor. Webpack, Vite ve Turbopack karşılaştırması build tarafını; TypeScript 7 geçiş testi ise bu projedeki gerçek compiler farkını anlatıyor.

Kullandığım birincil kaynaklar

• Framer — website builder nedir?
• Framer — CMS website builder
• Framer — fiyatlandırma
• Framer — SEO özellikleri
• Framer — JSON-LD
• Framer — hosting altyapısı
• Framer — görsel optimizasyonu
• Framer — site optimizasyonu
• Framer Developers FAQ
• Framer Marketplace — Shopify commerce plugin’i
• Next.js — framework tanımı ve dokümantasyon
• Next.js — MIT lisansı
• Next.js — metadata ve Open Graph
• Next.js — görseller
• Next.js — fontlar
• Next.js — static export
• Next.js — self-hosting
• Vercel — Next.js Commerce ve Shopify
• Vercel — fiyatlandırma
• Coolify — self-hosted ve Cloud fiyatlandırması
• Coolify — self-hosted ve Cloud sorumlulukları
• Hetzner — 15 Haziran 2026 fiyat güncellemesi
• Hetzner — Cloud sunucu ve Primary IPv4 fiyatı
• Google web.dev — Core Web Vitals