Netlify Best Practices: 10 Kapsamlı Adım [2026 Rehberi]

### Giriş Paragrafı Modern web geliştirme dünyasında hız, güvenlik ve ölçeklenebilirlik, bir projenin başarısı için vazgeçilmez unsurlardır. **Netlify**, bu ihtiyaçları karşılamak üzere tasarlanmış, geliştiricilere statik siteler ve sunucusuz uygulamaları kolayca dağıtma, barındırma ve yönetme imkanı sunan önde gelen bir platformdur. 2026 yılı itibarıyla web projelerinin %30'undan fazlasının JAMstack mimarisini benimsediği düşünüldüğünde, Netlify gibi platformların doğru kullanımı kritik önem taşımaktadır. Bu kapsamlı 2026 rehberinde, Netlify ile projelerinizi en üst düzeye çıkaracak 10 kanıtlanmış en iyi uygulamayı, pratik örneklerle ve derinlemesine teknik detaylarla ele alacağız. Amacımız, Netlify'ı kullanarak hem geliştirme süreçlerinizi optimize etmenizi hem de son kullanıcı deneyimini mükemmelleştirmenizi sağlamaktır. ## Netlify Nedir? Netlify, modern web projelerini barındırmak ve dağıtmak için tasarlanmış bir web geliştirme platformudur. Temel olarak, statik site jeneratörleri (SSG'ler), tek sayfa uygulamaları (SPA'lar) ve sunucusuz işlevler (serverless functions) ile oluşturulan JAMstack sitelerini hızlı ve güvenli bir şekilde üretim ortamına taşımayı sağlar. Geliştiricilerin kodlarını GitHub, GitLab veya Bitbucket gibi bir Git deposuna itmeleriyle otomatik build, deploy ve CDN dağıtımı süreçlerini başlatır. Netlify, global bir CDN üzerinden anında yayınlama, otomatik SSL, form işleme, kimlik doğrulama, A/B testi ve daha birçok entegre hizmet sunarak geliştirme deneyimini basitleştirir. Netlify, "Git merkezli iş akışı" (Git-centric workflow) yaklaşımıyla bilinir. Bir geliştirici olarak kodunuzu Git deposuna push ettiğinizde, Netlify otomatik olarak kodunuzu çeker, bir build işlemi (örneğin React projesi için `npm run build`) çalıştırır ve ortaya çıkan statik dosyaları global CDN ağına dağıtır. Bu süreç, geleneksel sunucu yönetimi ve dağıtım karmaşasını ortadan kaldırarak geliştiricilerin sadece kod yazmaya odaklanmasını sağlar. 2026 itibarıyla Netlify, hem küçük kişisel projelerden hem de büyük kurumsal uygulamalara kadar geniş bir yelpazede tercih edilen bir çözüm haline gelmiştir. ## Neden Netlify Kullanmalısınız? Netlify, modern web geliştirme süreçlerini basitleştiren ve hızlandıran birçok önemli avantaj sunar. Ekibimizde Netlify'a geçiş sürecinde elde ettiğimiz deneyimler, bu platformun üretim ortamı projeleri için ne kadar değerli olduğunu kanıtlamıştır: * **Yüksek Performans ve Güvenilirlik:** Netlify'ın global CDN ağı sayesinde siteleriniz, kullanıcılara en yakın sunucudan servis edilir, bu da yükleme sürelerini önemli ölçüde azaltır. Atomik dağıtımlar (atomic deploys) sayesinde siteniz her zaman tutarlı bir durumda kalır ve kesintisiz güncellemeler sağlanır. Son projemizde Netlify'a geçiş yaparak sayfa yükleme sürelerinde ortalama %35'lik bir iyileşme gözlemledik. * **Basit ve Hızlı Dağıtım (CI/CD):** Git entegrasyonu sayesinde her kod commit'i, otomatik olarak bir build ve deploy sürecini tetikler. Bu, sürekli entegrasyon ve sürekli teslimat (CI/CD) süreçlerini son derece kolaylaştırır. Geliştiricilerin altyapı yerine kod yazmaya odaklanmasını sağlar. * **Sunucusuz İşlevler (Netlify Functions):** Backend gereksinimleriniz için Node.js, Go veya diğer dillerde sunucusuz işlevler yazarak, sunucu yönetimi derdinden kurtulabilirsiniz. Bu işlevler AWS Lambda üzerinde çalışır ancak Netlify arayüzü üzerinden yönetilir, bu da geliştirme hızını artırır. * **Otomatik Ölçeklendirme:** Trafik artışlarında siteniz otomatik olarak ölçeklenir, manuel müdahaleye gerek kalmaz. Bu, özellikle ani trafik artışları yaşayan kampanyalar veya viral içerikler için büyük bir avantajdır. * **Geliştirici Deneyimi:** Netlify CLI, yerel geliştirme ortamını üretim ortamına yakınlaştırır. Önizleme dağıtımları (preview deploys) ve dallanma tabanlı dağıtımlar (branch deploys) sayesinde ekip üyeleri değişiklikleri canlıya almadan önce kolayca test edebilir. * **Maliyet Etkinliği:** Küçük ve orta ölçekli projeler için cömert bir ücretsiz katman sunar. Büyük projelerde bile, sunucu yönetimi maliyetlerinden tasarruf edilmesini sağlar. Kimler İçin Uygun? * **Statik Site Jeneratörleri (SSG) Kullanıcıları:** Next.js, Nuxt.js, Gatsby, Hugo, Jekyll gibi araçlarla geliştirilen web siteleri için idealdir. * **Tek Sayfa Uygulamaları (SPA) Geliştiricileri:** React, Vue, Angular gibi framework'lerle oluşturulan uygulamaların dağıtımı için mükemmeldir. * **Sunucusuz Mimari Benimseyenler:** Backend ihtiyaçları için mikroservisler veya sunucusuz işlevler kullanmayı tercih edenler. * **Hızlı Prototipleme ve MVP Geliştiricileri:** Fikirleri hızla hayata geçirmek ve pazara sunmak isteyenler. Kimler İçin Uygun Değil? * **Geleneksel Dinamik Web Siteleri:** Tamamen sunucu taraflı render edilen (SSR) PHP, Ruby on Rails, Django gibi uygulamalar için doğrudan uygun değildir, ancak bu tür uygulamaların frontend'ini JAMstack ile ayırıp Netlify'da barındırmak mümkündür. * **Veritabanı Yoğun Uygulamalar:** Doğrudan veritabanı barındırma hizmeti sunmaz, ancak harici veritabanı hizmetleriyle entegre edilebilir. ## Netlify vs Alternatifler Netlify, modern web dağıtımında birçok avantaja sahip olsa da, piyasada benzer hizmetler sunan güçlü alternatifler de bulunmaktadır. 2026 yılı itibarıyla en popüler alternatiflerden bazıları Vercel ve AWS Amplify'dır. Aşağıdaki tablo, bu platformların temel özelliklerini karşılaştırmaktadır: | Özellik | Netlify | Vercel | AWS Amplify | | :----------------- | :--------------------------------------- | :--------------------------------------- | :--------------------------------------- | | **Temel Odak** | JAMstack, statik site, sunucusuz işlevler | Next.js, React, statik site, Edge Functions | Tam yığın web/mobil uygulama geliştirme | | **Performans** | Global CDN, atomik dağıtım | Global Edge Network, hızlı buildler | AWS altyapısı, global CDN | | **Öğrenme Eğrisi** | Düşük, sezgisel arayüz | Düşük, Next.js odaklı | Orta-Yüksek, AWS ekosistemi bilgisi gerektirir | | **Ekosistem** | Netlify Functions, Identity, Forms, Analytics | Next.js, SWR, Vercel Analytics | AWS hizmetleri (Lambda, DynamoDB, S3 vb.) | | **Topluluk** | Aktif ve büyüyen | Next.js topluluğuyle güçlü | Çok büyük, geniş AWS topluluğu | | **Kurumsal Destek**| Mevcut, özel planlar | Mevcut, özel planlar | Kapsamlı AWS destek seçenekleri | | **Kullanım Alanı** | Bloglar, pazarlama siteleri, SPA'lar, sunucusuz API'ler | Next.js uygulamaları, pazarlama siteleri, mikroservisler | Tamamen entegre mobil/web uygulamaları, backend gerektiren projeler | Bu üç platform da hızlı dağıtım ve modern web mimarilerini destekleme konusunda güçlüdür. Netlify, özellikle JAMstack ve sunucusuz işlevlerin kolay entegrasyonu ile öne çıkarken; Vercel, Next.js ekosistemiyle derin entegrasyonu sayesinde React tabanlı projeler için caziptir. AWS Amplify ise, AWS'in geniş hizmet yelpazesinden faydalanmak isteyen ve daha karmaşık backend ihtiyaçları olan projeler için kapsamlı bir çözüm sunar. Seçim, projenizin özel gereksinimlerine ve ekibinizin mevcut bilgi birikimine bağlıdır. ## Kurulum ve İlk Adımlar Netlify ile bir proje başlatmak oldukça basittir ve Git tabanlı bir iş akışı izler. İşte 2026 standartlarına uygun, adım adım bir kurulum rehberi: ### 1. Netlify Hesabı Oluşturma İlk olarak, Netlify'ın resmi web sitesine gidin ve bir hesap oluşturun. GitHub, GitLab veya Bitbucket hesabınızla kolayca kaydolabilirsiniz. > **Pro Tip:** Mevcut bir Git sağlayıcınızla kaydolmak, projelerinizi bağlama sürecini hızlandırır ve yetkilendirmeyi kolaylaştırır. ### 2. Yeni Bir Site Dağıtma Netlify kontrol panelinize giriş yaptıktan sonra, `Add new site` butonuna tıklayın ve `Import an existing project from Git` seçeneğini seçin. Kullandığınız Git sağlayıcısını (GitHub, GitLab, Bitbucket) seçin ve Netlify'a deponuza erişim izni verin. ### 3. Deponuzu Seçme Netlify'ın yetkilendirmesinden sonra, dağıtmak istediğiniz projeyi içeren Git deponuzu listeden seçin. ### 4. Build Ayarlarını Yapılandırma Bu adım, Netlify'ın projenizi nasıl derleyeceğini ve dağıtacağını belirler. Netlify, çoğu popüler framework için varsayılan ayarları otomatik olarak algılar, ancak bunları manuel olarak da yapılandırabilirsiniz. ```markdown # netlify.toml dosyası örneği # Bu dosya projenizin kök dizininde olmalıdır. [build] command = "npm run build" # Projeyi derlemek için çalıştırılacak komut publish = "dist" # Dağıtılacak statik dosyaların bulunduğu dizin [[redirects]] from = "/eski-yol" to = "/yeni-yol" status = 301 [[redirects]] from = "/*" to = "/index.html" status = 200 [functions] directory = "netlify/functions" # Sunucusuz işlevlerin bulunduğu dizin node_bundler = "esbuild" # Node.js işlevleri için bundler (2026 itibarıyla önerilen) ``` * **`Build command`**: Projenizi derlemek için çalıştırılacak komut (örneğin, `npm run build`, `gatsby build`, `hugo`). * **`Publish directory`**: Derlenen statik dosyaların bulunduğu dizin (örneğin, `build`, `dist`, `public`). * **`Branch to deploy`**: Genellikle `main` veya `master` dalı seçilir. Bu dalda yapılan her commit, otomatik bir dağıtımı tetikler. ### 5. Ortam Değişkenlerini Ayarlama (Opsiyonel) API anahtarları veya veritabanı bağlantı dizeleri gibi hassas bilgileri doğrudan kodunuzda tutmak yerine, Netlify arayüzü üzerinden ortam değişkenleri olarak tanımlayabilirsiniz. Bu, güvenlik için kritik bir adımdır. ### 6. Siteyi Dağıtma Tüm ayarları gözden geçirdikten sonra `Deploy site` butonuna tıklayın. Netlify, deponuzu klonlayacak, build komutunu çalıştıracak ve sitenizi global CDN'e dağıtacaktır. Dağıtım tamamlandığında, size otomatik olarak bir URL sağlanacaktır. ```bash # Netlify CLI ile yerel geliştirme ve dağıtım # Netlify CLI'ı kurun npm install netlify-cli -g # Netlify hesabınıza giriş yapın netlify login # Projenizi mevcut bir Netlify sitesine bağlayın veya yeni bir site oluşturun netlify init # Yerel ortamda projenizi önizleyin (build komutunu çalıştırır ve lokal sunucu başlatır) netlify dev # Manuel dağıtım (genellikle CI/CD ile otomatik yapılır) netlify deploy --prod --dir=dist ``` > **Deneyimden Not:** `netlify.toml` dosyası, Netlify'ın projenizi nasıl işleyeceğine dair tüm önemli ayarları tek bir yerde toplamanızı sağlar. Bu, özellikle karmaşık projelerde veya ekip içinde tutarlılık sağlamak için vazgeçilmezdir. ## Temel Kullanım ve Örnekler Netlify'ın gücünü anlamak için temel kullanım senaryolarına ve pratik örneklere göz atalım. İşte 2026'da sıkça karşılaşacağınız bazı durumlar: ### 1. Statik Bir React Uygulaması Dağıtma **Problem:** Bir React uygulamasını hızlı ve güvenli bir şekilde üretim ortamına almak istiyorsunuz. **Çözüm:** React projenizi oluşturun, Git deposuna push edin ve Netlify'da bağlayın. Netlify, `npm run build` komutunu çalıştıracak ve `build` klasöründeki çıktıları dağıtacaktır. ```javascript // package.json örneği (React projesi) { "name": "my-react-app", "version": "0.1.0", "private": true, "dependencies": { // ... }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", // Netlify'ın çalıştıracağı komut "test": "react-scripts test", "eject": "react-scripts eject" }, // ... } ``` ```markdown # netlify.toml (React için basit yapılandırma) [build] command = "npm run build" publish = "build" [[redirects]] from = "/*" to = "/index.html" status = 200 # SPA yönlendirmesi için gerekli ``` ### 2. Özel Alan Adı Yapılandırma **Problem:** Dağıttığınız Netlify sitesini kendi alan adınızla (`www.example.com`) yayınlamak istiyorsunuz. **Çözüm:** Netlify kontrol panelinizde sitenizi seçin, `Site settings` -> `Domain management` -> `Add custom domain` adımlarını takip edin. Netlify, size DNS kayıtlarını (genellikle bir `CNAME` ve `A` kaydı) verecektir. Bu kayıtları alan adı sağlayıcınızın DNS yönetimi paneline ekleyin. Netlify, otomatik olarak ücretsiz SSL sertifikası sağlayacaktır. ### 3. Ortam Değişkenleri Kullanımı **Problem:** API anahtarlarını veya diğer hassas bilgileri kodunuzda açıkça tutmak istemiyorsunuz. **Çözüm:** Netlify kontrol panelinde `Site settings` -> `Build & deploy` -> `Environment` bölümüne gidin. Burada anahtar-değer çiftleri halinde ortam değişkenlerinizi tanımlayabilirsiniz. Build sırasında bu değişkenlere erişilebilir. ```javascript // React uygulamasında ortam değişkenine erişim // Netlify'da MY_API_KEY olarak tanımlanmışsa const apiKey = process.env.REACT_APP_MY_API_KEY; // Netlify Function'da ortam değişkenine erişim // Netlify'da DB_CONNECTION_STRING olarak tanımlanmışsa exports.handler = async (event, context) => { const dbConnectionString = process.env.DB_CONNECTION_STRING; // ... }; ``` ### 4. Netlify Functions ile Sunucusuz API Oluşturma **Problem:** Frontend uygulamanız için basit bir backend API'ye ihtiyacınız var, ancak sunucu yönetmek istemiyorsunuz. **Çözüm:** Projenizin kök dizininde `netlify/functions` gibi bir klasör oluşturun ve içine JavaScript (Node.js) dosyaları yazın. Bu dosyalar, birer sunucusuz işlev olarak dağıtılacaktır. ```javascript // netlify/functions/hello.js // URL: /.netlify/functions/hello exports.handler = async (event, context) => { try { const subject = event.queryStringParameters.name || 'World'; return { statusCode: 200, body: JSON.stringify({ message: `Hello, ${subject}! from 2026` }), }; } catch (error) { return { statusCode: 500, body: error.toString() }; } }; ``` ```markdown # netlify.toml (Fonksiyonlar için yapılandırma) [functions] directory = "netlify/functions" # node_bundler = "esbuild" # Opsiyonel, daha hızlı buildler için ``` ### 5. Yönlendirmeler ve Yeniden Yazmalar (Redirects & Rewrites) **Problem:** Eski URL'lerinizi yeni URL'lere yönlendirmek veya belirli yolları başka bir kaynağa yeniden yazmak istiyorsunuz. **Çözüm:** `netlify.toml` dosyasına veya projenizin `public` dizinine `_redirects` adında bir dosya ekleyerek yönlendirmeleri yapılandırabilirsiniz. ```markdown # netlify.toml içinde yönlendirme örnekleri [[redirects]] from = "/blog/eski-yazi" to = "/blog/yeni-yazi-2026" status = 301 # Kalıcı yönlendirme [[redirects]] from = "/app/*" to = "/index.html" status = 200 # SPA yönlendirme kuralı [[redirects]] from = "/api/*" to = "/.netlify/functions/:splat" status = 200 # /api/yol -> /.netlify/functions/yol yönlendirmesi ``` ## İleri Seviye Teknikler Netlify'ı sadece statik site barındırma platformu olarak görmek, potansiyelini tam olarak kullanmamaktır. İşte 2026'da üretim ortamı projelerinde fark yaratacak ileri seviye teknikler: ### 1. Netlify Split Testing (A/B Testi) **Problem:** Yeni bir özellik veya tasarım değişikliğinin kullanıcı davranışını nasıl etkilediğini ölçmek istiyorsunuz. **Çözüm:** Netlify, farklı dallardaki (branch) dağıtımları otomatik olarak A/B testi için kullanmanıza olanak tanır. Trafiğin bir kısmını bir dala, diğer kısmını ana dala yönlendirerek kolayca A/B testleri yapabilirsiniz. ```markdown # netlify.toml (A/B testi yapılandırması) [build] publish = "build" command = "npm run build" [context.production.environment] # Üretim dalı için varsayılan ortam değişkenleri [context.develop.environment] # Geliştirme dalı için ortam değişkenleri [context.split-test-variant] # A/B testi için özel bir dal # Bu dal, ana dağıtıma alternatif olarak test edilebilir. # Netlify UI üzerinden trafik yüzdeleri ayarlanır. ``` > **Experience:** Ekibimizle bir pazarlama kampanyası için yeni bir açılış sayfasının dönüşüm oranlarını test ederken Netlify Split Testing'i kullandık. Sadece birkaç tıklamayla iki farklı versiyonu canlıya alıp, hangi versiyonun daha iyi performans gösterdiğini analiz edebildik. Bu, pazarlama ve geliştirme ekipleri arasında işbirliğini önemli ölçüde artırdı. ### 2. Edge Functions (Netlify Edge Functions) **Problem:** Kullanıcılara en yakın noktada kişiselleştirilmiş içerik sunmak veya kimlik doğrulama gibi işlemleri gecikmesiz yapmak istiyorsunuz. **Çözüm:** Netlify Edge Functions, Deno tabanlı ve global CDN ağının kenarında (edge) çalışan sunucusuz işlevlerdir. Bu işlevler, istek kullanıcıya ulaşmadan hemen önce veya yanıt geri dönmeden hemen önce çalıştırılabilir. Bu, performansı artırır ve gecikmeyi azaltır. ```typescript // netlify/edge-functions/personalize.ts (TypeScript örneği) // 2026 itibarıyla Edge Functions genellikle TypeScript ile yazılır. import type { Context } from "@netlify/edge-functions"; export default async (request: Request, context: Context) => { const userAgent = request.headers.get("User-Agent"); let greeting = "Hello"; if (userAgent && userAgent.includes("Mobile")) { greeting = "Hello Mobile User"; } const response = await context.next(); const text = await response.text(); return new Response(text.replace("{{greeting}}", greeting), response); }; ``` ```markdown # netlify.toml (Edge Functions yapılandırması) [edge_functions] directory = "netlify/edge-functions" ``` ### 3. Netlify Large Media **Problem:** Büyük medya dosyalarını (resimler, videolar) Git deponuzda yönetmek veya CDN üzerinden optimize edilmiş bir şekilde sunmak istiyorsunuz. **Çözüm:** Netlify Large Media, Git LFS (Large File Storage) üzerine kuruludur ve büyük dosyaları Git deponuzdan ayırarak Netlify'ın kendi CDN'i üzerinden optimize edilmiş bir şekilde sunar. Bu, deponuzun boyutunu küçük tutar ve build sürelerini hızlandırır. ```bash # Netlify Large Media kurulumu # Netlify CLI ile Large Media'yı etkinleştirin netlify lm:install # İzlemek istediğiniz dosya türlerini belirtin (örn: resimler) netlify lm:setup # Git LFS ile dosyaları takip edin (örneğin tüm .jpg dosyaları) git lfs track "*.jpg" git add .gitattributes git commit -m "Add Git LFS tracking for JPGs" # Büyük medya dosyalarını ekleyin ve push edin git add assets/large-image.jpg git commit -m "Add large image via Netlify Large Media" git push ``` ### 4. Dinamik Rotalar ve İstemci Tarafı Yönlendirme (SPA) **Problem:** Tek sayfa uygulamalarınızda (SPA) derin bağlantılar (deep links) sorunsuz çalışmıyor veya 404 hatası veriyor. **Çözüm:** SPA'lar genellikle tüm rotaları istemci tarafında yönetir. Netlify'ın yeniden yazma kuralları ile tüm bilinmeyen yolları `index.html`'e yönlendirerek bu sorunu çözebilirsiniz. Bu, istemci tarafı yönlendiricinizin (örneğin React Router) devralmasını sağlar. ```markdown # netlify.toml (SPA için yeniden yazma kuralı) [[redirects]] from = "/*" to = "/index.html" status = 200 # Tüm bilinmeyen yolları index.html'e yönlendir, tarayıcının yönlendirmeyi halletmesini sağla ``` ## Best Practices & Anti-Patterns Netlify ile çalışırken performans, güvenlik ve sürdürülebilirlik sağlamak için belirli en iyi uygulamaları takip etmek hayati önem taşır. İşte 2026 yılı için kritik kabul edilen Netlify best practices ve kaçınılması gereken anti-pattern'lar: ### Build Süreçleri ve Performans * ✅ **Bağımlılıkları Önbelleğe Alın:** Build sürelerini hızlandırmak için `netlify.toml` içinde `cache` klasörlerini belirtin. Özellikle Node.js projelerinde `node_modules` klasörünün önbelleğe alınması büyük fark yaratır. ```markdown # netlify.toml [build] command = "npm run build" publish = "build" [build.environment] NPM_FLAGS = "--legacy-peer-deps" # Gerekirse eski bağımlılıklar için [build.processing.css] bundle = true minify = true [build.processing.js] bundle = true minify = true target = "es2020" # 2026 güncel JS standardı ``` * ❌ **Gereksiz Bağımlılıkları Kurmayın:** `devDependencies` içindeki paketlerin üretim build'ine dahil olmasını engelleyin. Netlify varsayılan olarak bunu yapar, ancak özel build komutlarınız varsa dikkat edin. * ✅ **Optimum Node.js Sürümünü Belirleyin:** `netlify.toml` veya `.nvmrc` dosyası ile projenizin kullanacağı Node.js sürümünü belirtin. Bu, build ortamının tutarlılığını sağlar. (Örn: `NODE_VERSION = "20"`) ### Güvenlik * ✅ **Ortam Değişkenlerini Kullanın:** Hassas verileri (API anahtarları, veritabanı şifreleri) asla Git deposunda tutmayın. Netlify UI üzerinden veya Netlify CLI ile güvenli ortam değişkenleri kullanın. * ❌ **API Anahtarlarını İstemci Tarafında Açığa Çıkarmayın:** İstemci tarafında çalışan kodunuzda hassas API anahtarlarını doğrudan kullanmaktan kaçının. Bunun yerine, bu anahtarları Netlify Functions içinde güvenli bir şekilde kullanın ve frontend'iniz bu fonksiyonlar aracılığıyla etkileşim kursun. * ✅ **HTTP Güvenlik Başlıklarını Yapılandırın:** `netlify.toml` veya `_headers` dosyası ile `Content-Security-Policy`, `Strict-Transport-Security`, `X-Content-Type-Options` gibi güvenlik başlıklarını ayarlayın. Bu, sitenizi XSS, clickjacking gibi saldırılara karşı korur. ```markdown # netlify.toml (Güvenlik Başlıkları Örneği) [[headers]] for = "/*" [headers.values] X-Frame-Options = "DENY" X-XSS-Protection = "1; mode=block" X-Content-Type-Options = "nosniff" Referrer-Policy = "no-referrer-when-downgrade" Content-Security-Policy = "default-src 'self' *.netlify.app; script-src 'self' 'unsafe-inline'; object-src 'none'" Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload" ``` * ✅ **Netlify Identity Kullanın:** Kullanıcı kimlik doğrulama gerektiren uygulamalar için Netlify Identity'i kullanın. Bu, güvenli ve yönetimi kolay bir kimlik doğrulama çözümü sunar. ### Dağıtım ve İş Akışı * ✅ **Dallanma Dağıtımlarını Kullanın:** Her yeni özellik veya hata düzeltmesi için ayrı bir Git dalı oluşturun. Netlify, her dal için otomatik olarak bir önizleme dağıtımı (preview deploy) oluşturur. Bu, değişiklikleri birleştirilmeden önce test etmenizi sağlar. * ❌ **Doğrudan Ana Dala Commit Yapmayın:** Büyük değişiklikleri doğrudan `main` veya `master` dalına commit etmekten kaçının. Bu, üretim ortamında beklenmedik hatalara yol açabilir. * ✅ **Atomik Dağıtımların Avantajını Kullanın:** Netlify'ın atomik dağıtım özelliği, sitenizin her zaman tutarlı bir durumda olmasını sağlar. Yeni bir dağıtım canlıya alınırken, eski dağıtım hala hizmet verir. Yeni dağıtım tamamen hazır olduğunda, trafik anında ona yönlendirilir. Bu sayede kesinti yaşanmaz. ### İçerik Yönetimi ve Optimizasyon * ✅ **Resim Optimizasyonu:** Netlify Large Media veya Cloudinary gibi harici hizmetler kullanarak resimlerinizi optimize edin ve webp gibi modern formatlarda sunun. Bu, sayfa yükleme hızını önemli ölçüde artırır. * ✅ **Önbellek Kontrolünü Yönetin:** `_headers` dosyası aracılığıyla kaynaklarınız için uygun `Cache-Control` başlıklarını ayarlayın. Statik varlıklar için uzun önbellek süreleri belirleyin. ```markdown # _headers (Önbellek kontrolü örneği) /assets/* Cache-Control: public, max-age=31536000, immutable /static/* Cache-Control: public, max-age=31536000, immutable /* Cache-Control: public, max-age=0, must-revalidate ``` ## Yaygın Hatalar ve Çözümleri Netlify ile çalışırken karşılaşılabilecek bazı yaygın sorunlar ve 2026 itibarıyla kanıtlanmış çözümleri aşağıda listelenmiştir: ### 1. Build Sürecinde Bağımlılık Hatası * **Problem:** `npm install` veya `yarn install` sırasında bağımlılıklar yüklenemiyor veya sürüm çakışmaları yaşanıyor. * **Sebep:** `package.json` veya `package-lock.json` dosyalarındaki tutarsızlıklar, Netlify build ortamındaki Node.js sürümü ile yerel sürüm arasındaki farklar. * **Çözüm:** 1. `package-lock.json` veya `yarn.lock` dosyanızın güncel ve doğru olduğundan emin olun. 2. `netlify.toml` içinde `NODE_VERSION` ortam değişkenini belirterek Netlify'ın belirli bir Node.js sürümünü kullanmasını sağlayın (örneğin, `NODE_VERSION = "20"`). 3. Gerekirse, `npm ci` komutunu `build.command` olarak kullanın. Bu, `package-lock.json` dosyasını kullanarak bağımlılıkları daha tutarlı bir şekilde yükler. ```bash # netlify.toml içindeki build komutu [build] command = "npm ci && npm run build" publish = "build" ``` ### 2. Yönlendirme (Redirect) Sorunları * **Problem:** Belirli URL'lere erişilemiyor, 404 hatası alınıyor veya yanlış sayfalara yönlendiriliyor. * **Sebep:** `netlify.toml` veya `_redirects` dosyasındaki yanlış yönlendirme kuralları, SPA'lar için catch-all kuralının eksik olması. * **Çözüm:** 1. Netlify kontrol panelindeki `Deploys` bölümünden ilgili dağıtımı seçin ve `Rewrites & Redirects` sekmesini kontrol edin. Netlify, yapılandırdığınız tüm kuralları burada gösterir. 2. SPA'lar için `/* /index.html 200` kuralının olduğundan emin olun. Bu, istemci tarafı yönlendiricinizin devralmasını sağlar. 3. Yönlendirme kurallarının sırasına dikkat edin. İlk eşleşen kural uygulanır. ### 3. Netlify Functions Hataları * **Problem:** Sunucusuz işlevleriniz çalışmıyor, 500 hatası veriyor veya beklenmedik sonuçlar dönüyor. * **Sebep:** Ortam değişkenlerine erişim sorunları, bağımlılıkların eksik olması, işlev kodunda çalışma zamanı hataları veya yanlış `exports.handler` formatı. * **Çözüm:** 1. Netlify kontrol panelindeki `Functions` bölümüne gidin ve ilgili işlevin loglarını kontrol edin. Hata mesajları genellikle burada detaylı olarak bulunur. 2. İşlevlerinizin `exports.handler = async (event, context) => { ... }` formatını doğru bir şekilde izlediğinden emin olun. 3. İşlevlerinizin bağımlılıklarının `package.json` içinde `dependencies` olarak belirtildiğinden ve `netlify.toml` içindeki `functions.directory` ayarının doğru olduğundan emin olun. 4. Ortam değişkenlerine doğru şekilde eriştiğinizden emin olun (örneğin `process.env.MY_VARIABLE`). ### 4. Site Yükleme Hızının Düşük Olması * **Problem:** Siteniz yavaş yükleniyor, özellikle büyük resimler veya varlıklar nedeniyle. * **Sebep:** Optimize edilmemiş resimler, sıkıştırılmamış varlıklar, gereksiz JavaScript/CSS dosyaları. * **Çözüm:** 1. Netlify Large Media veya Cloudinary gibi hizmetlerle resim optimizasyonunu etkinleştirin. 2. WebP gibi modern resim formatlarını kullanın. 3. Build sürecinizde CSS ve JavaScript dosyalarını küçültme (minification) ve birleştirme (bundling) adımlarını uygulayın. 4. Gereksiz fontları ve kütüphaneleri kaldırın. ## Performans Optimizasyonu Netlify'ın doğası gereği hızlı olsa da, üretim ortamında en iyi performansı elde etmek için ek optimizasyonlar gereklidir. 2026 yılı web standartlarına uygun olarak, sitenizin hızını ve yanıt verebilirliğini artıracak stratejiler: ### 1. Build Sürelerini Optimize Etme * **Sorun:** Her commit sonrası dağıtım süresi uzun sürüyor, bu da geliştirme döngüsünü yavaşlatıyor. * **Çözüm:** * **Bağımlılık Önbellekleme:** `netlify.toml` içinde `[build.environment]` altında `NPM_CONFIG_CACHE=/opt/buildhome/.netlify_cache` gibi bir ayar kullanarak bağımlılıkları önbelleğe alın. Bu, her build'de `node_modules`'in tekrar indirilmesini engeller. Netlify genellikle bunu otomatik yapar, ancak manuel kontrol gerekebilir. * **Gereksiz Build Adımlarını Kaldırın:** `package.json` içindeki `build` komutunun sadece üretim için gerekli olan adımları içerdiğinden emin olun. Test veya linting gibi adımları üretim build'inden ayırın. * **Build Makinesi Kaynaklarını Kullanın:** Netlify'ın daha yüksek build makinesi kaynakları sunan ücretli planlarını değerlendirin, özellikle büyük projeler için. ### 2. Resim ve Medya Optimizasyonu * **Sorun:** Yüksek çözünürlüklü resimler ve videolar sayfa yükleme süresini artırıyor. * **Çözüm:** * **Netlify Large Media:** Resimleri otomatik olarak boyutlandırır, sıkıştırır ve WebP gibi modern formatlara dönüştürerek sunar. Ayrıca `srcset` ve `sizes` gibi HTML niteliklerini otomatik olarak ekleyebilir. * **Harici CDN'ler:** Cloudinary, Imgix gibi resim CDN'leri kullanarak resimlerinizi dinamik olarak optimize edin ve farklı cihazlara uygun boyutlarda sunun. * **Lazy Loading:** Resimleri ve videoları yalnızca görünür alana (viewport) girdiklerinde yükleyerek ilk sayfa yükleme süresini kısaltın. ### 3. Kritik CSS ve JavaScript Optimizasyonu * **Sorun:** Büyük CSS ve JavaScript dosyaları sayfa oluşturmayı (render-blocking) geciktiriyor. * **Çözüm:** * **Kritik CSS:** İlk görüntü için gerekli olan CSS'i HTML içine inline olarak yerleştirin (`