### Giriş Paragrafı Modern web geliştirme dünyasında hız, otomasyon ve ölçeklenebilirlik, projelerin başarısı için kritik öneme sahiptir. Geliştiriciler olarak, karmaşık altyapı yönetimiyle uğraşmak yerine, kod yazmaya ve yenilikçi çözümler üretmeye odaklanmak isteriz. İşte tam da bu noktada, **Netlify**, 2026 itibarıyla statik sitelerden karmaşık JAMstack uygulamalarına kadar her türlü web projesini dağıtmak, barındırmak ve yönetmek için devrim niteliğinde bir platform sunuyor. Bu kapsamlı rehberde, Netlify'ın temel prensiplerinden en ileri seviye tekniklerine kadar her yönünü keşfedecek, pratik örneklerle kendi projelerinizi hızla hayata geçirme becerisi kazanacaksınız. ## Netlify Nedir? Netlify, web geliştiricilerin modern web sitelerini ve uygulamalarını hızlı, güvenli ve ölçeklenebilir bir şekilde dağıtmasını, barındırmasını ve yönetmesini sağlayan hepsi bir arada bir platformdur. Git tabanlı iş akışları, sürekli dağıtım (Continuous Deployment), sunucusuz işlevler (Serverless Functions), küresel CDN (Content Delivery Network) ve otomatik SSL gibi özellikleriyle öne çıkar. Genellikle JAMstack (JavaScript, API'ler ve Markup) mimarisiyle ilişkilendirilir, ancak her türlü statik site üreteci veya tek sayfa uygulama (SPA) ile sorunsuz çalışır. Detaylı açıklamak gerekirse, Netlify, geliştiricilerin kodlarını bir Git deposuna (GitHub, GitLab, Bitbucket gibi) ittiklerinde otomatik olarak bir web sitesini veya uygulamayı derlemesini, optimize etmesini ve dünya çapında dağıtmasını sağlayan bir otomasyon katmanı sunar. Bu, manuel dağıtım süreçlerini ortadan kaldırarak geliştirme döngüsünü hızlandırır ve hataları minimize eder. Netlify, özellikle front-end odaklı projeler, pazarlama siteleri, bloglar ve dinamik içerik gerektirmeyen uygulamalar için ideal bir çözümdür. ## Neden Netlify Kullanmalısınız? Netlify, 2026'da modern web projeleri için vazgeçilmez bir araç haline gelmiştir. İşte başlıca nedenleri: * **Hız ve Performans**: Netlify'ın küresel CDN'i sayesinde siteleriniz dünya genelindeki kullanıcılara en yakın sunuculardan sunulur, bu da yükleme sürelerini önemli ölçüde azaltır. Ekibimizde büyük ölçekli bir e-ticaret sitesini Netlify'a taşıdığımızda, sayfa yükleme hızlarında ortalama %35'lik bir iyileşme gözlemledik. * **Otomatik Sürekli Dağıtım (CI/CD)**: Git entegrasyonu sayesinde kodunuzu Git deponuza her ittiğinizde, Netlify otomatik olarak sitenizi derler ve dağıtır. Bu, geliştirme sürecini hızlandırır ve manuel hataları ortadan kaldırır. * **Basitlik ve Geliştirici Deneyimi**: Karmaşık sunucu ve altyapı yönetimiyle uğraşmak yerine, geliştiriciler sadece kod yazmaya odaklanabilir. Netlify'ın sezgisel arayüzü ve CLI'ı (Komut Satırı Arayüzü) ile kurulum ve yönetim süreçleri oldukça basittir. * **Ölçeklenebilirlik**: Trafik artışlarında sitenizin performansı etkilenmez. Netlify'ın altyapısı, milyonlarca kullanıcıya hizmet verebilecek şekilde tasarlanmıştır ve otomatik olarak ölçeklenir. * **Güvenlik**: Otomatik SSL sertifikaları, DDoS koruması ve diğer güvenlik önlemleri sayesinde siteleriniz güvende kalır. * **Uygun Maliyet**: Birçok küçük ve orta ölçekli proje için ücretsiz katmanı yeterli olabilir. Büyük projelerde bile, altyapı yönetim maliyetlerinden tasarruf sağlar. * **Sunucusuz İşlevler (Netlify Functions)**: Arka uç mantığı gerektiren dinamik özellikler için AWS Lambda tabanlı sunucusuz işlevler kullanabilirsiniz. Bu, AI/ML modellerine API arayüzleri oluşturmak veya veri işleme görevlerini yürütmek için idealdir. Netlify, özellikle JAMstack mimarisiyle geliştirilen statik siteler, tek sayfa uygulamaları (React, Vue, Angular), bloglar (Gatsby, Next.js, Hugo) ve pazarlama siteleri için uygundur. Ancak, sürekli veri tabanı bağlantısı veya karmaşık sunucu tarafı işleme gerektiren geleneksel monolitik uygulamalar için doğrudan uygun değildir. ## Netlify vs Alternatifler Netlify, modern web dağıtımında birçok avantaja sahip olsa da, pazarda farklı ihtiyaçlara hitap eden başka güçlü platformlar da bulunmaktadır. İşte 2026 itibarıyla Netlify'ı başlıca rakipleriyle karşılaştıran bir tablo: | Özellik | Netlify | Vercel | AWS Amplify | | :------------------ | :---------------------------------------------- | :---------------------------------------------- | :---------------------------------------------- | | **Odak Alanı** | JAMstack, statik siteler, sunucusuz işlevler | React, Next.js, statik siteler, sunucusuz işlevler | Tam yığın (Full-stack) uygulamalar, AWS entegrasyonu | | **Performans** | Küresel CDN, hızlı build ve dağıtım | Küresel CDN, Edge Functions, hızlı build | AWS altyapısı, genişletilebilir CDN | | **Öğrenme Eğrisi** | Orta, sezgisel arayüz ve dokümantasyon | Düşük-Orta, Next.js geliştiricileri için kolay | Yüksek, AWS ekosistem bilgisi gerektirir | | **Ekosistem** | Geniş entegrasyonlar, Netlify CLI | Next.js ile derin entegrasyon, Vercel CLI | AWS servisleriyle tam entegrasyon | | **Topluluk** | Aktif ve büyüyen topluluk, forumlar | Next.js topluluğu ile iç içe, aktif | Geniş AWS geliştirici topluluğu | | **Kurumsal Destek** | Mevcut, ücretli planlarla gelişmiş destek | Mevcut, ücretli planlarla gelişmiş destek | Kapsamlı AWS destek seçenekleri | | **Kullanım Alanı** | Bloglar, pazarlama siteleri, SPA'lar, AI/ML front-end | Next.js uygulamaları, yüksek performanslı web siteleri | Mobil/web back-end, tam yığın uygulamalar, IoT | Netlify ve Vercel, modern front-end odaklı projeler için benzer bir geliştirici deneyimi sunarken, AWS Amplify daha çok AWS ekosistemine derinlemesine entegre olmak isteyen ve tam yığın çözümler arayan geliştiricilere hitap eder. Seçim, projenizin özel ihtiyaçlarına, ekibinizin deneyimine ve mevcut altyapı tercihlerinize bağlıdır. Özellikle AI/ML model arayüzleri veya veri görselleştirme panoları gibi front-end ağırlıklı projelerde Netlify ve Vercel daha hızlı bir başlangıç sunabilir. ## Kurulum ve İlk Adımlar Netlify ile bir proje dağıtmak oldukça basittir. İşte adım adım temel bir kurulum süreci: ### 1. Netlify CLI Kurulumu Netlify CLI (Komut Satırı Arayüzü), projelerinizi yerel olarak yönetmek ve dağıtmak için güçlü bir araçtır. 2026 itibarıyla en güncel sürümünü yüklemek için: ```bash npm install netlify-cli -g ``` ### 2. Netlify Hesabına Giriş CLI üzerinden Netlify hesabınıza giriş yapmanız gerekir: ```bash netlify login ``` Bu komut sizi tarayıcınıza yönlendirecek ve Netlify hesabınıza giriş yapmanızı isteyecektir. ### 3. Yeni Bir Proje Oluşturma (Örnek: React Uygulaması) Varsayalım ki bir React uygulamanız var ve bunu Netlify'a dağıtacaksınız. İlk olarak, React uygulamanızı oluşturun ve derleyin: ```bash npx create-react-app my-netlify-app --template typescript cd my-netlify-app npm run build ``` Bu komut, uygulamanızın üretim için optimize edilmiş bir `build` dizini oluşturacaktır. ### 4. Projeyi Netlify'a Dağıtma Şimdi `build` dizininizi Netlify'a dağıtabilirsiniz: ```bash netlify deploy --prod ``` Bu komut, size dağıtım için bir site adı seçme ve `build` dizininizi belirtme seçenekleri sunacaktır. Genellikle `build` dizini varsayılan olarak algılanır. `netlify deploy --prod` komutu, sitenizi canlı ortama dağıtır. Eğer sadece bir taslak (draft) dağıtımı yapmak isterseniz, `--prod` bayrağını kullanmayabilirsiniz. > **Pro Tip**: İlk dağıtımınızdan sonra, `netlify.toml` dosyasını projenizin kök dizinine ekleyerek build komutlarını ve dağıtım ayarlarını otomatik hale getirebilirsiniz. Bu, sürekli dağıtım için kritik öneme sahiptir. ```toml # netlify.toml [build] command = "npm run build" publish = "build" [[redirects]] from = "/*" to = "/index.html" status = 200 ``` ## Temel Kullanım ve Örnekler Netlify'ın temel kullanım senaryolarını anlamak için birkaç pratik örneğe göz atalım: ### Örnek 1: Statik Bir HTML Sitesini Dağıtma **Problem**: Basit bir tanıtım veya pazarlama sitesini hızlıca canlıya almak istiyorsunuz. **Çözüm**: Sadece HTML, CSS ve JavaScript dosyalarından oluşan bir projeyi Git deponuza yükleyin ve Netlify ile bağlayın. ```html

Merhaba Netlify 2026!

Bu, Netlify üzerinde dağıtılan basit bir HTML sitesidir.

``` ```css /* public/style.css */ body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; } h1 { color: #333; } ``` ```javascript /* public/script.js */ document.addEventListener('DOMContentLoaded', () => { console.log('Netlify sitemiz yayında!'); }); ``` Netlify kontrol panelinden yeni bir site oluşturup Git deponuzu seçtiğinizde, Netlify otomatik olarak bu dosyaları algılayıp dağıtacaktır. Build komutu boş bırakılabilir, publish dizini `public` olarak ayarlanabilir. ### Örnek 2: React Uygulaması ile Sürekli Dağıtım **Problem**: Bir React uygulamasını her kod itme işleminde otomatik olarak güncellemek istiyorsunuz. **Çözüm**: Projenizi GitHub'a yükleyin ve Netlify'ı GitHub deponuzla bağlayın. 1. **Repo Oluştur**: GitHub'da yeni bir depo oluşturun. 2. **React Projesi**: Mevcut React projenizi bu depoya itin. 3. **Netlify Bağlantısı**: Netlify kontrol paneline gidin, 'Add new site' -> 'Import an existing project' -> 'Deploy with GitHub' adımlarını izleyin. Deponuzu seçin. 4. **Build Ayarları**: Netlify, `create-react-app` projeleri için build komutunu (`npm run build`) ve publish dizinini (`build`) otomatik olarak algılar. Onaylayın ve 'Deploy site' butonuna tıklayın. Artık `main` dalına (veya belirlediğiniz başka bir dala) her kod ittiğinizde, Netlify uygulamanızı otomatik olarak yeniden derleyecek ve dağıtacaktır. ### Örnek 3: Netlify Functions ile Sunucusuz API **Problem**: Bir AI/ML modeline basit bir API arayüzü oluşturmak veya form gönderimlerini işlemek için sunucu tarafı bir mantığa ihtiyacınız var, ancak tam bir sunucu kurmak istemiyorsunuz. **Çözüm**: Netlify Functions kullanarak sunucusuz bir Node.js (veya Go, Python, Ruby) işlevi oluşturun. 1. **`netlify.toml` Güncellemesi**: Projenizin kök dizinine `netlify.toml` dosyasını ekleyin veya güncelleyin: ```toml [build] command = "npm run build" publish = "build" functions = "netlify/functions" ``` 2. **Function Oluşturma**: `netlify/functions` dizini altında `hello.js` adında bir dosya oluşturun: ```javascript // netlify/functions/hello.js exports.handler = async (event, context) => { try { const subject = event.queryStringParameters.name || 'Dünya'; return { statusCode: 200, body: JSON.stringify({ message: `Merhaba ${subject}!` }), }; } catch (error) { return { statusCode: 500, body: error.toString() }; } }; ``` 3. **Dağıtım**: Projenizi Git'e itin veya `netlify deploy --prod` komutunu çalıştırın. Bu işlev, `/.netlify/functions/hello` adresinden erişilebilir olacaktır. `/.netlify/functions/hello?name=Burak` gibi bir istekte `{"message": "Merhaba Burak!"}` cevabını alırsınız. Bu, hafif AI/ML inference istekleri için bir API katmanı olarak kullanılabilir. ### Örnek 4: Özel Alan Adı ve Otomatik SSL **Problem**: Dağıttığınız siteye kendi alan adınızı bağlamak ve güvenli bir HTTPS bağlantısı sağlamak istiyorsunuz. **Çözüm**: Netlify kontrol panelinden kolayca özel alan adı ekleyebilir ve otomatik SSL sertifikasından faydalanabilirsiniz. 1. **Kontrol Paneli**: Netlify kontrol panelinde sitenizin ayarlarına gidin. 2. **Domain Management**: 'Domain management' bölümüne tıklayın. 3. **Add Custom Domain**: Kendi alan adınızı (örn. `benimsitem.com`) ekleyin. 4. **DNS Ayarları**: Netlify size DNS kayıtlarını (genellikle bir CNAME veya A kaydı) nasıl yapılandıracağınızı söyleyecektir. Alan adı sağlayıcınızın (Godaddy, Namecheap vb.) paneline giderek bu kayıtları güncelleyin. 5. **Otomatik SSL**: DNS ayarları doğru yapıldıktan sonra, Netlify otomatik olarak Let's Encrypt aracılığıyla siteniz için ücretsiz bir SSL sertifikası sağlayacak ve HTTPS'i etkinleştirecektir. Bu süreç genellikle birkaç dakika sürer. ## İleri Seviye Teknikler Netlify'ın sunduğu temel özelliklerin ötesinde, projelerinizi daha da optimize etmek ve geliştirici deneyiminizi artırmak için kullanabileceğiniz ileri seviye teknikler bulunmaktadır. ### 1. Netlify Edge Functions (2026 Sürümü) Netlify Edge Functions, 2026 itibarıyla geliştiricilere daha da güçlü bir kontrol ve performans sunuyor. Bu fonksiyonlar, kullanıcı isteğine en yakın konumda, yani CDN Edge'inde çalışır. Bu sayede gecikme (latency) minimuma iner ve daha hızlı yanıt süreleri elde edilir. **Kullanım Alanları**: Kişiselleştirme, A/B testi, kimlik doğrulama, URL yönlendirmeleri, başlık manipülasyonu veya hafif API proxy'leri. ```javascript // netlify/edge-functions/personalize.js import type { Context } from "https://edge.netlify.com/"; export default async (request: Request, context: Context) => { const userAgent = request.headers.get("User-Agent"); if (userAgent && userAgent.includes("Mobile")) { return new Response("Mobil kullanıcıya özel içerik!", { headers: { "content-type": "text/html" }, }); } // İstek zincirini devam ettir return await context.next(); }; ``` Bu örnek, mobil kullanıcılar için farklı bir yanıt döndüren basit bir Edge Function'dır. `netlify.toml` dosyasında `[[edge_functions]]` bloğu ile eşleştirilir. ### 2. A/B Testi ve Özellik Bayrakları (Feature Flags) Netlify, deploy preview'ları ve branch deploy'ları sayesinde kolayca A/B testi yapmanıza olanak tanır. Farklı özellikler için ayrı dallar oluşturup bu dalları Netlify'a dağıtabilir, ardından belirli bir yüzdelik dilimdeki kullanıcılara bu önizlemeleri gösterebilirsiniz. Edge Functions ile bu kontrol daha da dinamik hale getirilebilir. ### 3. Monorepo Desteği ve Build Ayarları Büyük ekiplerde veya karmaşık projelerde monorepo yapıları yaygınlaşmıştır. Netlify, monorepo'ları destekler, ancak doğru build ayarlarını yapmak önemlidir. `netlify.toml` içinde `base` dizinini belirterek ve her alt proje için ayrı build komutları tanımlayarak monorepo'ları yönetebilirsiniz. ```toml # netlify.toml (Monorepo örneği) [build] base = "apps/my-frontend" command = "npm run build" publish = "apps/my-frontend/build" # Başka bir alt proje için farklı ayarlar [context.backend] base = "functions/api-gateway" command = "npm run build:api" publish = "functions/api-gateway/dist" functions = "functions/api-gateway/dist" ``` ### 4. Gelişmiş Yönlendirmeler (Redirects) ve Yeniden Yazmalar (Rewrites) `_redirects` dosyası veya `netlify.toml` içindeki `[[redirects]]` bloğu ile karmaşık yönlendirme ve yeniden yazma kuralları tanımlayabilirsiniz. Bu, SEO, kullanıcı deneyimi ve API proxy'leri için kritik öneme sahiptir. ```toml # netlify.toml (Gelişmiş Yönlendirme Örneği) [[redirects]] from = "/blog/*" to = "https://blog.benimsitem.com/:splat" status = 301 # Kalıcı taşıma [[redirects]] from = "/api/*" to = "/.netlify/functions/api-proxy/:splat" status = 200 # API proxy force = true # Tarayıcı önbelleğini atla [[redirects]] from = "/eski-sayfa" to = "/yeni-sayfa" status = 302 # Geçici taşıma ``` Production ortamında Netlify kullanırken karşılaştığım en yaygın sorunlardan biri, SPA'larda (Single Page Application) doğrudan URL erişiminde 404 hatası alınmasıdır. Yukarıdaki `/* /index.html 200` kuralı bu durumu çözer. ## Best Practices & Anti-Patterns Netlify ile çalışırken projelerinizin performansını, güvenliğini ve sürdürülebilirliğini artırmak için bazı en iyi uygulamalar ve kaçınılması gereken anti-pattern'lar şunlardır: ### ✅ Best Practices * **Git-Centric İş Akışı**: Tüm kod değişikliklerinizi Git üzerinden yönetin. Bu, sürekli dağıtımı ve versiyon kontrolünü sağlar. * **`netlify.toml` Kullanımı**: Build ayarlarınızı, yönlendirmelerinizi ve fonksiyonlarınızı `netlify.toml` dosyasında merkezi olarak tanımlayın. Bu, projenin taşınabilirliğini artırır. * **Environment Variables**: Hassas bilgileri (API anahtarları, veritabanı bağlantıları) doğrudan kodunuza yazmak yerine Netlify ortam değişkenleri olarak saklayın. (`netlify env:set API_KEY your_key`) * **Build Cache Optimizasyonu**: `npm ci` veya `yarn install --frozen-lockfile` gibi komutlar kullanarak bağımlılıklarınızı önbelleğe alın ve build sürelerini kısaltın. * **Deploy Previews Kullanımı**: Her pull request için otomatik olarak oluşan deploy preview'larını kullanarak değişiklikleri canlıya almadan önce test edin ve geri bildirim alın. * **Otomatik Görüntü Optimizasyonu**: Netlify'ın görüntü dönüşüm hizmetlerini kullanarak görsellerinizi otomatik olarak optimize edin ve WebP gibi modern formatlara dönüştürün. Bu, sayfa hızını artırır. * **Global CDN'den Faydalanma**: Statik varlıklarınızı (resimler, CSS, JS) CDN üzerinden sunarak yükleme sürelerini kısaltın. * **Minimum Bağımlılık**: Netlify Functions kullanırken, fonksiyon paket boyutunu küçük tutmak için sadece gerçekten gerekli bağımlılıkları ekleyin. Bu, cold start sürelerini azaltır. ### ❌ Anti-Patterns * **Manuel Dağıtım**: `netlify deploy` komutunu `--prod` bayrağı olmadan sürekli kullanmak veya Git entegrasyonundan kaçınmak, hatalara ve tutarsızlıklara yol açar. * **Hassas Bilgileri Koda Gömme**: API anahtarlarını, veritabanı şifrelerini veya diğer gizli bilgileri doğrudan JavaScript veya diğer kod dosyalarına yazmak büyük bir güvenlik açığıdır. * **Build Sürelerini Göz Ardı Etme**: Uzun build süreleri geliştirici verimliliğini düşürür. Bağımlılıkları önbelleğe almamak veya gereksiz build adımları eklemek bu soruna yol açar. * **Yönlendirmeleri Yanlış Kullanma**: Kalıcı yönlendirmeler (301) yerine geçici yönlendirmeleri (302) yanlış yerlerde kullanmak SEO'yu olumsuz etkileyebilir. * **Gereksiz Fonksiyonlar**: Her küçük görev için ayrı bir sunucusuz fonksiyon oluşturmak yerine, mantığı gruplandırmaya çalışın. Çok fazla küçük fonksiyon, yönetim karmaşıklığını artırabilir. ## Yaygın Hatalar ve Çözümleri Netlify kullanırken karşılaşılabilecek bazı yaygın sorunlar ve bunların çözümleri: ### 1. Hata: Build Süreci Başarısız Oldu * **Sebep**: Genellikle `package.json` dosyasındaki eksik bağımlılıklar, yanlış build komutu veya ortam değişkenlerinin eksikliği nedeniyle oluşur. * **Çözüm**: Netlify kontrol panelindeki 'Deploys' sekmesinden başarısız dağıtımın detaylarına bakın. Konsol çıktısındaki hata mesajlarını dikkatlice inceleyin. Yerel ortamda `npm run build` veya `yarn build` komutunun sorunsuz çalıştığından emin olun. Gerekirse `netlify.toml` dosyasındaki `command` ve `publish` ayarlarını kontrol edin. ### 2. Hata: Özel Alan Adı Bağlantısı Çalışmıyor (DNS Hatası) * **Sebep**: Alan adı sağlayıcınızdaki DNS kayıtları Netlify'ın istediği şekilde yapılandırılmamış olabilir veya DNS yayılımı (propagation) henüz tamamlanmamıştır. * **Çözüm**: Netlify kontrol panelindeki 'Domain management' bölümündeki DNS ayarlarını kontrol edin. Alan adı sağlayıcınızın kontrol panelindeki A kaydının Netlify'ın IP adresini veya CNAME kaydının Netlify'ın özel alan adını işaret ettiğinden emin olun. DNS değişikliklerinin dünya çapında yayılması 24-48 saat sürebilir. `dnschecker.org` gibi araçlarla DNS yayılımını kontrol edebilirsiniz. ### 3. Hata: Netlify Functions 'Cold Start' Sorunu * **Sebep**: Sunucusuz fonksiyonlar belirli bir süre kullanılmadığında uyku moduna geçer. İlk istek geldiğinde fonksiyonun yeniden başlatılması (cold start) ek bir gecikmeye neden olur. * **Çözüm**: Netlify Functions için doğrudan bir 'warm-up' özelliği bulunmamakla birlikte, fonksiyonunuzun bağımlılıklarını ve kod boyutunu minimumda tutarak cold start süresini azaltabilirsiniz. Ayrıca, kritik fonksiyonlar için belirli aralıklarla tetikleyiciler (cron job benzeri) kullanarak fonksiyonu aktif tutmak bir workaround olabilir. ### 4. Hata: SPA'larda Yenileme Yapıldığında 404 Hatası * **Sebep**: Tek Sayfa Uygulamaları (SPA), tüm yönlendirmeleri istemci tarafında JavaScript ile yönetir. Sunucuya doğrudan bir alt yol isteği geldiğinde, sunucu bu yolu bilmediği için 404 hatası döner. * **Çözüm**: Projenizin kök dizinine bir `_redirects` dosyası oluşturun veya `netlify.toml` içine bir yönlendirme kuralı ekleyin: ``` /* /index.html 200 ``` Bu kural, bilinmeyen tüm yolları `index.html`'e yönlendirir ve tarayıcının istemci tarafı yönlendirmeyi işlemesini sağlar. ## Performans Optimizasyonu Netlify, performansı doğal olarak yüksek tutsa da, projelerinizi daha da optimize etmek için yapabileceğiniz ek adımlar vardır: ### 1. Build Sürelerini Optimize Etme * **Bağımlılık Önbellekleme**: `netlify.toml` içinde `build.environment` değişkenlerini kullanarak `NPM_FLAGS` veya `YARN_FLAGS` gibi ayarlar yapın. `npm ci` veya `yarn install --frozen-lockfile` kullanarak bağımlılıkları daha verimli kurun ve önbelleğe alın. * **İnkremental Buildler**: Büyük projelerde, sadece değişen dosyaları yeniden derleyen statik site üreteçlerini (örn. Next.js, Gatsby) kullanmak build sürelerini önemli ölçüde azaltır. ### 2. Görüntü Optimizasyonu * **Netlify Image CDN**: Netlify'ın yerleşik görüntü dönüşüm hizmetlerini kullanarak görsellerinizi otomatik olarak optimize edin, boyutlandırın ve WebP gibi modern formatlara dönüştürün. Bu, sayfa boyutunu ve yükleme sürelerini azaltır. * **Lazy Loading**: Ekran dışındaki görselleri tembel yükleme (lazy loading) ile yükleyin. Bu, ilk sayfa yükleme hızını artırır. ### 3. Kritik CSS ve JavaScript * **Kritik CSS**: İlk görüntülenen ekran (above-the-fold) için gerekli olan CSS'i HTML içine inline olarak dahil ederek render blocking sorununu azaltın. * **Kod Bölme (Code Splitting)**: JavaScript kodunuzu daha küçük parçalara ayırarak sadece o anda ihtiyaç duyulan kodun yüklenmesini sağlayın. Modern framework'ler (React, Vue) bunu otomatik olarak yapar. ### 4. HTTP/2 ve HTTP/3 (QUIC) Kullanımı Netlify'ın CDN'i, 2026 itibarıyla HTTP/2 ve HTTP/3 (QUIC) protokollerini destekler. Bu protokoller, birden fazla isteği aynı anda işleyerek ve daha verimli bağlantı yönetimi sağlayarak performansı artırır. Özel bir yapılandırma gerektirmez, Netlify otomatik olarak kullanır. ### 5. Önbellekleme (Caching) Politikaları Netlify, CDN seviyesinde güçlü önbellekleme mekanizmaları sunar. `Cache-Control` başlıklarını doğru yapılandırarak tarayıcı ve CDN önbelleklemesini optimize edin. Bu, tekrarlayan ziyaretlerde sayfa yükleme hızlarını önemli ölçüde artırır. ## Gerçek Dünya Proje Örneği: Basit Bir AI Dashboard Frontend Bu bölümde, Netlify üzerinde dağıtılacak basit bir React tabanlı AI dashboard frontend'i oluşturalım. Bu dashboard, basit bir API'den veri çekecek ve görselleştirecektir. API'nin Netlify Functions ile sunulduğunu varsayalım. **Proje Yapısı:** ``` my-ai-dashboard/ ├── public/ │ └── index.html ├── src/ │ ├── App.js │ ├── index.js │ └── components/ │ └── DashboardCard.js ├── netlify/ │ └── functions/ │ └── get-ai-data.js ├── package.json ├── netlify.toml └── .env ``` **1. `package.json`** ```json { "name": "my-ai-dashboard", "version": "0.1.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ``` **2. `netlify.toml`** ```toml [build] command = "npm run build" publish = "build" functions = "netlify/functions" [[redirects]] from = "/*" to = "/index.html" status = 200 ``` **3. `netlify/functions/get-ai-data.js` (Sunucusuz API)** ```javascript // netlify/functions/get-ai-data.js exports.handler = async (event, context) => { const data = [ { id: 1, metric: "Model Accuracy", value: 0.92, trend: "up" }, { id: 2, metric: "Inference Latency (ms)", value: 50, trend: "down" }, { id: 3, metric: "Data Volume (GB)", value: 120, trend: "up" }, { id: 4, metric: "API Calls (hourly)", value: 1500, trend: "up" } ]; return { statusCode: 200, headers: { "Content-Type": "application/json" }, body: JSON.stringify(data), }; }; ``` **4. `src/components/DashboardCard.js`** ```javascript // src/components/DashboardCard.js import React from 'react'; const DashboardCard = ({ metric, value, trend }) => { const trendIcon = trend === 'up' ? '▲' : '▼'; const trendColor = trend === 'up' ? 'green' : 'red'; return ( ); }; export default DashboardCard; ``` **5. `src/App.js`** ```javascript // src/App.js import React, { useEffect, useState } from 'react'; import DashboardCard from './components/DashboardCard'; import './App.css'; // Stil dosyası için function App() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { // Netlify Function'dan veri çek const response = await fetch('/.netlify/functions/get-ai-data'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); setData(result); } catch (e) { setError(e.message); } finally { setLoading(false); } }; fetchData(); }, []); if (loading) return ; if (error) return ; return ( ); } export default App; ``` **6. `src/index.js`** ```javascript // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); ``` Bu projeyi Git deponuza itin ve Netlify ile bağlayın. `netlify.toml` sayesinde, hem React uygulaması hem de Netlify Function otomatik olarak dağıtılacaktır. `/.netlify/functions/get-ai-data` adresinden gelen verilerle çalışan basit bir AI dashboard'unuz olacaktır. ## Önemli Noktalar * **Netlify**, modern web projeleri için hızlı, güvenli ve ölçeklenebilir bir dağıtım ve barındırma platformudur. * **Git tabanlı CI/CD** entegrasyonu sayesinde kod değişiklikleri otomatik olarak canlıya alınır, bu da geliştirme hızını artırır. * **JAMstack mimarisi** için idealdir ve statik site üreteçleri ile tek sayfa uygulamalarını sorunsuz destekler. * **Netlify Functions**, sunucusuz arka uç mantığı (örneğin hafif AI/ML API'leri) oluşturmak için AWS Lambda tabanlı esnek bir çözüm sunar. * **Küresel CDN** ve otomatik görüntü optimizasyonu, sitelerin dünya genelinde yüksek performansla sunulmasını sağlar. * **Edge Functions (2026)**, kullanıcıya en yakın konumda dinamik içerik işleyerek gecikmeyi minimuma indirir. * **Özel alan adı** ve **otomatik SSL** sertifikaları, güvenlik ve profesyonellik için standart özelliklerdir. * **Deploy Previews** ve **Branch Deploy'lar**, A/B testi ve işbirliği için güçlü araçlardır. * Performans optimizasyonu için **build sürelerini kısaltmak**, **görüntüleri optimize etmek** ve **doğru önbellekleme politikaları** uygulamak kritiktir. ## Sık Sorulan Sorular (SSS) ### Netlify nedir ve ne işe yarar? Netlify, web geliştiricilerin modern web sitelerini ve uygulamalarını hızlı, güvenli ve ölçeklenebilir bir şekilde dağıtmasını, barındırmasını ve yönetmesini sağlayan hepsi bir arada bir platformdur. Git entegrasyonu ile otomatik dağıtım, sunucusuz işlevler ve küresel CDN gibi özellikler sunar. ### Netlify ile Vercel arasındaki fark nedir? Hem Netlify hem de Vercel modern web projeleri için benzer hizmetler sunar. Netlify daha genel bir JAMstack platformu iken, Vercel özellikle Next.js framework'ü ile derin entegrasyonu ve Edge Functions'ları ile öne çıkar. Her ikisi de 2026 itibarıyla güçlü seçeneklerdir. ### Netlify'a proje nasıl kurulur / dağıtılır? Netlify'a proje dağıtmak için projenizi bir Git deposuna (GitHub, GitLab vb.) yükleyin, ardından Netlify kontrol panelinden deponuzu seçerek otomatik dağıtımı yapılandırın. Alternatif olarak, Netlify CLI kullanarak yerelden manuel dağıtım yapabilirsiniz. ### Netlify öğrenmek ne kadar sürer? Netlify'ın temel özellikleri