Bolt.new: Tarayıcıda AI ile Full-Stack Geliştirme Rehberi

# Bolt.new: Tarayıcıda AI ile Full-Stack Geliştirme Rehberi

Bir tarayıcı sekmesinde tam bir Node.js sunucusu çalıştırmak — kulağa bilim kurgu gibi gelmiyor mu? Ama StackBlitz'in WebContainers teknolojisi bunu gerçek kıldı ve Bolt.new bu teknolojinin üzerine AI'ın gücünü ekledi. Artık bilgisayarına hiçbir şey yüklemeden, sadece tarayıcından full-stack web uygulamaları yazabilir, test edebilir ve deploy edebilirsin. Bu yazıda Bolt.new'un teknik mimarisinden WebContainers'ın nasıl çalıştığına, gerçek proje deneyimlerinden Lovable ile detaylı karşılaştırmaya kadar her şeyi ele alacağız.

💡 Pro Tip: Bolt.new'un en büyük avantajı sıfır kurulum gerektirmesi. Hiçbir geliştirme ortamı yüklemeden, herhangi bir bilgisayardan veya tabletten web uygulaması geliştirebilirsin. Bu, özellikle hızlı prototipleme ve demo hazırlama için devrim niteliğinde.

İçindekiler

• WebContainers Teknolojisi
• Bolt.new Nasıl Çalışır?
• Desteklenen Framework'ler
• Gerçek Proje: E-Ticaret MVP
• Lovable vs Bolt.new Detaylı Karşılaştırma
• Fiyatlandırma ve Token Sistemi
• Best Practices ve Sınırlamalar
• Sonuç ve Öneriler

1. WebContainers Teknolojisi

WebContainers, Bolt.new'un arkasındaki sihirli teknoloji. StackBlitz tarafından geliştirilen bu teknoloji, Node.js runtime'ını doğrudan tarayıcı içinde çalıştırıyor. Evet, doğru duydun — npm install, Node.js server, dosya sistemi, terminal — hepsi tarayıcında.

WebContainers'ın Teknik Mimarisi

1// WebContainers'ın soyutlanmış mimarisi
2interface WebContainerArchitecture {
3  // Tarayıcı içi sanal dosya sistemi
4  filesystem: {
5    type: 'in-memory';
6    persistence: 'session-based';
7    operations: ['read', 'write', 'delete', 'watch'];
8  };
9 
10  // Node.js runtime (WASM tabanlı)
11  runtime: {
12    engine: 'wasm-based-node';
13    npmSupport: true;
14    serverCapability: true;
15    terminalAccess: true;
16  };
17 
18  // Güvenlik katmanı
19  security: {
20    sandboxed: true;
21    noFileSystemAccess: true;  // Host OS'a erişim yok
22    networkIsolation: 'browser-level';
23  };
24 
25  // Performans
26  performance: {
27    coldStart: '< 2 saniye';
28    hotReload: '< 500ms';
29    maxProjectSize: '~500MB';
30  };
31}

Geleneksel bulut tabanlı geliştirme ortamlarında (GitHub Codespaces, Gitpod) uzak bir sunucuda container çalışır ve ağ gecikmesi yaşarsın. WebContainers'da her şey tarayıcıda olduğu için gecikme yok, maliyet yok ve güvenlik endişesi minimum. Bu yaklaşım, Firebase Advanced yazımızda anlattığımız serverless mimarinin bir adım ötesi.

Geleneksel vs WebContainers

2. Bolt.new Nasıl Çalışır?

Bolt.new, Anthropic'in Claude modeli ile WebContainers'ı birleştiriyor. Sen doğal dille ne istediğini yazıyorsun, Claude kodu üretiyor ve WebContainers anında çalıştırıyor.

Çalışma Akışı

1. Prompt Girişi — Ne tür bir uygulama istediğini yaz
2. AI Kod Üretimi — Claude, dosya yapısını ve kodu oluşturur
3. Otomatik Kurulum — npm install ve bağımlılıklar yüklenir
4. Canlı Önizleme — Uygulama anında tarayıcıda çalışır
5. İterasyon — "Diff" görünümüyle değişiklikleri incele ve onayla
6. Deploy — Tek tıkla Netlify'a yayınla

Bolt.new'un farkı, AI modeline tam ortam kontrolü vermesi. AI sadece kod yazmaz — dosya sistemi, paket yöneticisi, terminal ve tarayıcı konsolu üzerinde tam yetki sahibidir. Bu da çok daha tutarlı sonuçlar çıkmasını sağlıyor.

1// Bolt.new prompt örneği — SaaS dashboard
2const boltPrompt = \`
3  Bir SaaS analytics dashboard'u oluştur:
4  - Next.js 15 + TypeScript kullan
5  - Sol sidebar navigasyon (Dashboard, Kullanıcılar, Analitik, Ayarlar)
6  - Üst kısımda 4 metric kartı (aktif kullanıcı, gelir, büyüme, churn)
7  - Ortada Recharts ile line chart (son 30 gün trafik)
8  - Altta tablo — son kullanıcı aktiviteleri
9  - Tailwind CSS + karanlık mod
10  - shadcn/ui bileşenleri kullan
11  - Responsive: mobilde sidebar drawer olsun
12\`;

Bu prompt ile Bolt.new, 15-20 dosyadan oluşan tam bir Next.js projesi üretir ve anında çalıştırır. Sonucu beğenmezsen "Sidebar'a logo ekle" veya "Chart'ı bar chart yap" gibi iterasyonlarla hızlıca güncelleyebilirsin.

💡 Pro Tip: Bolt.new'da "Diff view" özelliğini aktif tut. AI'ın yaptığı her değişikliği satır satır görebilirsin. Bu, hem öğrenme hem de kalite kontrol açısından çok değerli.

3. Desteklenen Framework'ler

Bolt.new birden fazla JavaScript framework'ünü destekliyor. İşte güncel destek matrisi:

Framework Desteği

Flutter vs React Native yazımızda ele aldığımız cross-platform tartışmasında Bolt.new'un Expo entegrasyonu ilginç bir alternatif sunuyor. Ama henüz beta aşamasında — production için dikkatli ol.

Entegrasyon Desteği

Bolt.new şu harici servislerle entegre çalışabiliyor:

• Supabase: — Veritabanı ve kimlik doğrulama
• Stripe: — Ödeme işlemleri
• Netlify: — Deploy ve hosting
• GitHub: — Sürüm kontrolü
• Figma: — Tasarım dosyasından kod

4. Gerçek Proje: E-Ticaret MVP

Bolt.new ile gerçek bir e-ticaret MVP oluşturmanın sürecini adım adım görelim:

Proje Yapısı

1// Bolt.new ile üretilen e-ticaret yapısı
2const ecommerceProject = {
3  framework: 'Next.js 15',
4  styling: 'Tailwind CSS + shadcn/ui',
5  database: 'Supabase PostgreSQL',
6  auth: 'Supabase Auth (email + Google)',
7  payment: 'Stripe Checkout',
8  deploy: 'Netlify',
9  pages: [
10    '/',                  // Ana sayfa — ürün grid
11    '/product/[id]',      // Ürün detay
12    '/cart',              // Sepet
13    '/checkout',          // Ödeme
14    '/account',           // Hesabım
15    '/admin',             // Admin paneli
16  ],
17  apiRoutes: [
18    '/api/products',      // CRUD
19    '/api/orders',        // Sipariş yönetimi
20    '/api/stripe-webhook', // Ödeme webhook
21  ],
22};

Prompt Stratejisi

Büyük projeler için tek bir dev prompt yerine aşamalı yaklaşım kullan:

1. İskelet: "Next.js 15 e-ticaret uygulaması. Ana sayfa ürün grid, ürün detay, sepet, checkout. shadcn/ui + Tailwind."
2. Veritabanı: "Supabase ekle. Products, orders, users tabloları. RLS aktif."
3. Auth: "Email + Google login. Koruma: /admin sadece admin rolü."
4. Ödeme: "Stripe Checkout entegrasyonu. Webhook ile sipariş durumu güncelle."
5. Polish: "Responsive, karanlık mod, loading skeleton, error boundary."

Bu yaklaşım, Flutter Clean Architecture yazımızdaki katmanlı mimari prensibine benziyor — temelden çatıya doğru inşa et.

5. Lovable vs Bolt.new Detaylı Karşılaştırma

İki platformu gerçek kullanım senaryolarında karşılaştıralım:

Teknik Karşılaştırma

Hangisini Seçmeli?

• Bolt.new seç:: Multi-framework destek istiyorsan, sıfır kurulum önemliyse, Netlify deploy tercihiyse
• Lovable seç:: Tasarım kalitesi öncelikliyse, Supabase derin entegrasyon istiyorsan, ekip çalışması gerekiyorsa

💡 Pro Tip: İkisini de dene! Bolt.new'un ücretsiz planı günlük 150K token veriyor — bu ciddi bir uygulama yapmaya yeterli. Lovable'ın günlük 5 kredisi daha kısıtlı ama kalite olarak etkileyici sonuçlar üretiyor.

6. Fiyatlandırma ve Token Sistemi

Bolt.new token bazlı bir fiyatlandırma kullanıyor:

Plan Detayları

Token harcaması prompt karmaşıklığına, üretilen kod miktarına ve iterasyon sayısına bağlı. Tipik bir orta büyüklükte uygulama 500K-2M token harcar.

Ek Token Satın Alma

Pro plan yetmezse, 10M ek token $30'a tek seferlik satın alınabiliyor. Bu abonelik değil — kullanana kadar geçerli.

7. Best Practices ve Sınırlamalar

En İyi Uygulamalar

1// Bolt.new best practices
2const bestPractices = {
3  // Prompt mühendisliği
4  prompting: [
5    'Framework ve versiyon belirt: "Next.js 15 + TypeScript"',
6    'UI kütüphanesi belirt: "shadcn/ui + Tailwind"',
7    'Responsive isteklerini ayrıntıla',
8    'Tek seferde 1-2 sayfa, parça parça ilerle',
9  ],
10 
11  // Kalite kontrol
12  quality: [
13    'Her iterasyonda Diff view kontrol et',
14    'Üretilen kodu GitHub\'a sync et',
15    'TypeScript strict mode aktif tut',
16    'Console hataları için browser_console_messages kontrol et',
17  ],
18 
19  // Performans
20  performance: [
21    'Büyük kütüphaneleri lazım olunca ekle',
22    'Image optimization için next/image kullan',
23    'Bundle size'ı takip et',
24  ],
25};

Bilinen Sınırlamalar

• Çevrimdışı çalışma yok: — İnternet bağlantısı şart
• Büyük projeler yavaşlayabilir: — 500MB üzeri projeler sorunlu
• Native modüller desteklenmez: — C/C++ bağımlılığı olan npm paketleri çalışmaz
• Veritabanı kalıcılığı yok: — Session bitince WebContainers sıfırlanır (Supabase ile çözersin)
• Rate limiting: — Yoğun kullanımda token sınırına ulaşabilirsin

iOS Security yazımızdaki gibi güvenlik konularını da göz ardı etme. AI'ın ürettiği kodda API key'ler client-side'da expose olabilir — mutlaka environment variable kullan.

Sonuç ve Öneriler

Bolt.new, WebContainers teknolojisiyle geliştirme dünyasında gerçek bir paradigma değişikliği yaratıyor. Hiçbir şey yüklemeden, herhangi bir cihazdan, tam kapsamlı web uygulamaları geliştirmek artık bir hayal değil.

Bolt.new'un Güçlü Yanları:

• Sıfır kurulum, anında başlama
• WebContainers güvenlik sandbox'ı
• Multi-framework destek (Next.js, React, Vue, Svelte...)
• Cömert ücretsiz plan (150K token/gün)
• Diff view ile şeffaf kod üretimi

Geliştirmesi Gereken Yanlar:

• Büyük projelerde performans sorunları
• Çevrimdışı çalışma desteği yok
• Lovable'a kıyasla tasarım kalitesi biraz geride
• Team işbirliği özellikleri sınırlı

2026'da AI ile geliştirme artık isteğe bağlı bir yenilik değil — ana akım bir çalışma biçimi. Swift Async/Await gibi temel programlama kavramlarını bilmek, AI araçlarını çok daha verimli kullanmanı sağlıyor. Tavsiyem: Bolt.new'u günlük iş akışına dahil et, ama temellerini asla ihmal etme.