← saas promptlarıGörsel

Bannerbear yerine kendin kurabilir misin?

Şablondan API ile otomatik görsel üretir.

KURULURgüven: yüksek · süre: bir oturum

aylık

$49(≈2.303 TL)

yıllık

$588(≈27.636 TL)

plan:
Automate
kaynak:
resmî fiyat sayfası
doğrulama:
2026-08-01 · güven: yüksek

TL rakamı 47 kurla kaba bir yaklaşıklıktır, güncel kuru yansıtmayabilir.

karar

Sosyal ve OG görseli üretmek Next.js'in kendi ImageResponse API'siyle çözülmüş bir problem. Şablonu JSX olarak yazıyorsun, veri route parametresinden geliyor, çıktı saniyenin altında dönüyor. Ajans işlerimizde site OG görsellerini bu yöntemle üretiyoruz.

Tek oturumda kendi kullanacağın sürümü çıkarırsın.

Ödenen şey şablon editörü. Şablonu zaten kod olarak yazıyorsan üyeliğin karşılığı yok.

sıfırdan yazmadan önce

Bu işi zaten yapan açık kaynak projeler var. Prompt'a geçmeden önce buraya bak.

  • satori · HTML ve CSS'i SVG'ye çevirir, ImageResponse'un altındaki motor

ne kuruluyor

OG ve sosyal görselleri Next.js route'undan üret.

gerekenler

  • Next.js 15 App Router
  • Yerel woff font dosyaları

kurarsan ne kaybedersin

  • Görsel şablon düzenleyici
  • Barındırılan görsel CDN'i
  • Hazır entegrasyonlar
  • Kod bilmeyen ekip üyesinin şablon değiştirmesi

İnsanlar neden hâlâ ödüyor: Şablonu tasarımcının tarayıcıdan değiştirebilmesi ekipte gerçek ihtiyaç. Tek geliştirici için değil.

ürünü ayakta tutan şey: Şablon düzenleyici ve barındırma

kurulum prompt'u

Boş bir klasör aç, o klasörde claude komutunu çalıştır, prompt'u yapıştır.

Next.js 15 App Router projeme Bannerbear yerine geçecek bir OG görsel ucu ekle. Gereksinimler:
- app/api/og/route.tsx altında ImageResponse (next/og) kullan. Ayrı sunucu, Playwright veya tarayıcı kurma.
- Parametreler: ?sablon=...&baslik=...&ustyazi=...&tema=acik|koyu. Çıktı 1200x630 PNG, ?boyut=kare ile 1080x1080.
- Şablonlar src/og-templates/<ad>.tsx dosyalarında JSX olarak tanımlı, route şablonu parametreden seçer.
- Fontlar yerel: assets/fonts/ altındaki woff dosyaları okunup ImageResponse'a verilir. Google Fonts çağrısı yapma.
- Türkçe karakter zorunlu: İ, ı, ş, ğ, ç, ö, ü doğru basılacak. Kurulumda bu karakterleri içeren bir örnek URL üret ve README'ye yaz.
- Uzun başlık taşmasın: karakter sayısına göre üç kademeli font küçültme. Metni kırpma, küçült.
- Önbellek: aynı parametreli istek önbellekten dönsün, route segment cache ayarını yap.
- generateMetadata için ogImageUrl(sablon, baslik) yardımcı fonksiyonunu yaz, sayfalar OG görselini bu uçtan alsın.
- Kapsam dışı: görsel şablon editörü, hesap ve kota sistemi, video üretimi. Bunları kurma.
- Sürtünme uyarısı: edge runtime'da dosya sistemi yok. Fontu fs ile değil fetch(new URL('../fonts/x.woff', import.meta.url)) kalıbıyla yükle, yoksa yerelde çalışıp deploy'da kırılır.
- README yaz: şablon ekleme, font ekleme, Türkçe karakter testi.

Bu prompt Bannerbear yerine kişisel kullanım için bir araç kurar. Ticari bir ürün ya da Bannerbear kopyası üretmez.

yakın kayıtlar

Bu sayfa bağımsız bir değerlendirmedir. Bannerbear ile herhangi bir bağlantı, sponsorluk veya onay ilişkisi yoktur. Tüm marka adları sahiplerine aittir ve yalnızca söz konusu ürünü tanımlamak için kullanılmıştır. Bir düzeltme bildirmek için: developer@tariktunc.com.