Pek çok işletmenin veya ajansın karşılaştığı ortak bir sorun var: Müşterileri için onlarca, hatta yüzlerce web sitesini yönetmek. Her bir site için ayrı bir sunucu yapılandırmak, dağıtım süreçlerini otomatikleştirmek ve performansı yüksek tutmak zamanla içinden çıkılmaz bir hale gelebilir. Peki, aynı anda birden fazla kiracıya (müşteriye) hizmet veren, hızlı, güvenli ve kolayca ölçeklenebilen statik siteleri nasıl inşa edebilirsiniz? Bu rehberde, Next.js’in statik site oluşturma yeteneklerini, Nginx’in güçlü yönlendirme özelliklerini ve Coolify’ın modern DevOps otomasyonunu birleştirerek bu karmaşık problemi çözen bir çok kiracılı statik site motoru mimarisini adım adım inceleyeceğiz. Bu çözümle, dağıtım süreçlerinizi basitleştirirken aynı zamanda maliyetleri düşürerek yüksek performanslı bir altyapı kurabileceksiniz.

Günümüz dijital dünyasında, işletmelerin çevrimiçi varlığı hiç olmadığı kadar kritik. Özellikle ajanslar, SaaS şirketleri veya büyük kurumsal yapıların farklı departmanları için birden fazla web sitesi veya mikro site yönetme ihtiyacı doğabiliyor. Bu durum, her site için ayrı bir hosting, sürekli güncellemeler, güvenlik yamaları ve performans optimizasyonları gibi bir dizi zorluğu beraberinde getiriyor. Bu karmaşıklık, geliştirme ekiplerinin verimliliğini düşürürken, operasyonel maliyetleri de önemli ölçüde artırıyor. Geleneksel yaklaşımlarla her yeni proje, genellikle mevcut altyapıya yeni bir yük getiriyor ve bu da uzun vadede ölçeklenebilirlik sorunlarına yol açıyor.

Bir an düşünün: Yeni bir müşteri edindiniz ve ona özel bir açılış sayfası veya tam teşekküllü bir web sitesi oluşturmanız gerekiyor. Mevcut yapınızda bu süreç ne kadar zaman alıyor? Yeni bir veritabanı mı kuruyorsunuz, yeni bir sunucu mu ayarlıyorsunuz, yoksa mevcut projenizi mi kopyalayıp değişiklikler yapıyorsunuz? Bu senaryoların her biri, önemli ölçüde manuel çaba gerektiren ve hataya açık süreçlerdir. İşte tam da bu noktada, çok kiracılı (multi-tenant) bir mimari devreye giriyor. Çok kiracılı bir yapı, birden fazla müşterinin veya uygulamanın aynı temel altyapı ve kod tabanını paylaşmasına olanak tanır. Bu sayede, her müşteriye özel bir deneyim sunarken, geliştirme, dağıtım ve bakım süreçlerini merkezileştirebilirsiniz. Bu yaklaşım, kaynak kullanımını optimize eder, maliyetleri düşürür ve yeni kiracıların sisteme entegrasyonunu hızlandırır.

Statik siteler ise bu denklemin performans ve güvenlik tarafını güçlendirir. Sunucu tarafında dinamik işlemlerin minimuma indirilmesi, sitelerin çok daha hızlı yüklenmesini sağlar. Bu hız, hem kullanıcı deneyimi hem de arama motoru optimizasyonu (SEO) için kritik öneme sahiptir. Ayrıca, daha az sunucu tarafı mantığı demek, daha az saldırı yüzeyi ve dolayısıyla daha yüksek güvenlik demektir. Ancak, statik siteler de kendi içinde yönetim zorlukları barındırabilir; özellikle dinamik içerik güncellemeleri veya birden fazla siteyi aynı çatı altında yönetme ihtiyacı duyulduğunda. İşte Next.js, Nginx ve Coolify üçlüsü, bu zorlukları aşarak hem güçlü hem de esnek bir çözüm sunuyor. Bu makalede, bu güçlü bileşenleri bir araya getirerek, sadece hızlı ve güvenli değil, aynı zamanda yönetimi kolay ve ölçeklenebilir bir çok kiracılı statik site motoru nasıl inşa edeceğinizi detaylıca ele alacağız. Amacımız, geliştirme süreçlerinizi optimize ederek, işinize değer katacak yeniliklere daha fazla odaklanmanızı sağlamaktır.

Temel Taşları Anlamak: Next.js, Nginx ve Coolify Nedir?

Çok kiracılı statik site motorumuzun mimarisini inşa etmeden önce, kullanacağımız anahtar teknolojileri ve her birinin bu yapıda oynadığı rolü derinlemesine anlamamız gerekiyor. Bu bölümde Next.js, Nginx ve Coolify’ın temel özelliklerini, avantajlarını ve projemizdeki işlevlerini ayrı ayrı inceleyeceğiz. Bu araçların birleşimi, bize güçlü, esnek ve yönetilebilir bir altyapı sunacaktır.

Next.js ile Statik Site Üretiminin Gücü: Neden SSG?

Next.js, React tabanlı bir framework olup, web uygulamaları geliştirmek için birçok güçlü özellik sunar. Bu özelliklerden en önemlilerinden biri de Statik Site Üretimi (Static Site Generation – SSG) yeteneğidir. SSG, web sitenizin içeriğinin derleme (build) zamanında HTML, CSS ve JavaScript dosyaları olarak oluşturulmasını sağlar. Yani, kullanıcı bir sayfayı talep ettiğinde, sunucunun dinamik olarak içerik üretmesine gerek kalmaz; zaten hazırlanmış olan statik dosyalar doğrudan sunulur.

Peki, SSG’nin avantajları nelerdir ve neden bizim çok kiracılı statik site motorumuz için ideal bir seçimdir? Öncelikle, performans. Statik dosyalar, sunucu tarafında işleme süresi gerektirmediği için inanılmaz derecede hızlı yüklenir. Bu, özellikle büyük ve içerik yoğun sitelerde kullanıcı deneyimini önemli ölçüde artırır. İkincisi, güvenlik. Arka uç sunucu tarafında daha az mantık çalıştığı için potansiyel güvenlik açıkları da azalır. Üçüncüsü, maliyet etkinliği. Statik dosyalar, bir İçerik Dağıtım Ağı (CDN) üzerinden kolayca sunulabilir, bu da trafik maliyetlerini düşürür ve sunucu yükünü azaltır. Ayrıca, sunucusuz mimarilerle mükemmel bir uyum içindedir. Next.js’in getStaticProps ve getStaticPaths gibi fonksiyonları, derleme zamanında dinamik veri çekme ve URL yolları oluşturma esnekliği sunarak, çok kiracılı yapımız için kritik bir temel oluşturur. Bu sayede, farklı kiracılar için farklı içerikleri kolayca statik olarak oluşturabiliriz. Örneğin, her kiracı için özelleştirilmiş verileri bir API’den çekip, o kiracıya özel sayfalar üretebiliriz.

Nginx: Yüksek Performanslı Yönlendirici Olarak Rolü

Nginx (Engine-X olarak telaffuz edilir), dünyanın en popüler açık kaynaklı web sunucularından biridir ve aynı zamanda bir ters proxy (reverse proxy), yük dengeleyici (load balancer) ve HTTP önbellekleyici olarak da işlev görür. Yüksek performansı, kararlılığı ve düşük kaynak tüketimi ile bilinir. Bizim mimarimizde Nginx’in temel rolü, gelen isteklere doğru Next.js statik çıktısını yönlendirmek olacaktır, özellikle de subdomain bazlı çok kiracılı yapıyı yönetmek.

Nginx, özellikle subdomain routing konusunda çok güçlüdür. Örneğin, musteri1.sitemotoru.com ve musteri2.sitemotoru.com adreslerine gelen istekleri algılayabilir ve her bir subdomain için önceden oluşturulmuş Next.js statik site dosyalarını sunabilir. Ayrıca, SSL sertifikalarını yönetme (Let’s Encrypt gibi araçlarla kolay entegrasyon), HTTP/2 desteği ve gelişmiş önbellekleme mekanizmaları gibi özellikleriyle projemizin güvenlik ve performansını artıracaktır. Nginx, gelen trafiği doğru kiracıya yönlendirerek, tek bir Next.js uygulamasının birden fazla kiracıya hizmet vermesini sağlayacak hayati bir köprü görevi görecektir. Bu, her kiracı için ayrı bir sunucu çalıştırma maliyetinden bizi kurtarır ve yönetimi basitleştirir.

Coolify: Modern DevOps’u Basitleştiren Hepsi Bir Arada Platform

Coolify, açık kaynaklı, kendi kendine barındırılabilen (self-hosted) bir DevOps platformudur. Netlify, Vercel veya Heroku gibi popüler bulut servislerine benzer işlevler sunar, ancak kontrol tamamen sizdedir. Coolify, uygulamaları, veritabanlarını ve servisleri kolayca dağıtmanıza, yönetmenize ve ölçeklendirmenize olanak tanır. Git entegrasyonu sayesinde, kodunuzu push ettiğinizde otomatik olarak uygulamalarınızı derleyip dağıtabilen sürekli entegrasyon ve sürekli dağıtım (CI/CD) süreçleri oluşturabilirsiniz.

Projemizde Coolify, tüm altyapımızın yönetim katmanı olarak görev yapacaktır. Next.js uygulamamızın kaynak kodunu bir Git deposundan (örneğin GitHub veya GitLab) otomatik olarak çekip derleyecek, statik çıktıları oluşturacak ve belirlenen sunucularda dağıtacaktır. Nginx yapılandırmasını manuel olarak yapmak yerine, Coolify genellikle kendi ters proxy’sini (Caddy veya Nginx) otomatik olarak yapılandırarak subdomain yönlendirmelerini basitleştirir ve SSL sertifikalarını yönetir. Bu, geliştiricilerin altyapı detaylarıyla uğraşmak yerine doğrudan uygulama geliştirmeye odaklanmasını sağlar. Coolify’ın sunduğu izleme (monitoring) ve günlük (logging) yetenekleri sayesinde, sitelerinizin durumunu kolayca takip edebilir ve potansiyel sorunlara hızlıca müdahale edebilirsiniz. Kısacası, Coolify, bu çok kiracılı statik site motorunun dağıtım, yönetim ve otomasyon omurgasını oluşturur, tüm süreci uçtan uca yönetir.

Çok Kiracılı Mimariyi Tasarlamak: Temel Yaklaşımlar Nelerdir?

Çok kiracılı bir mimari tasarlarken en kritik kararlardan biri, kiracıları birbirinden nasıl ayıracağımız ve her kiracıya özgü içeriği nasıl sunacağımızdır. Bu bölümde, subdomain bazlı kiracılık modelini derinlemesine inceleyecek ve Next.js tarafında veri ve içerik yönetimini nasıl ele alabileceğimizi ele alacağız. Bu yaklaşımlar, esnek, ölçeklenebilir ve kolay yönetilebilir bir sistem oluşturmamız için temel teşkil edecektir.

Subdomain Bazlı Kiracılık Modeli: Nasıl Çalışır?

Subdomain bazlı çok kiracılılık, her kiracının kendi özel subdomain (alt alan adı) üzerinden içeriğine eriştiği bir modeldir. Örneğin, bir web ajansı, müşteri A için musteri-a.ajansim.com, müşteri B için musteri-b.ajansim.com adreslerini kullanabilir. Bu model, birkaç önemli avantaj sunar. Öncelikle, her kiracının URL yapısı net ve belirgindir, bu da marka kimliğini güçlendirir ve kullanıcılar için anlaşılırlığı artırır. İkincisi, teknik açıdan yönetimi nispeten daha basittir çünkü Nginx gibi bir ters proxy, gelen istekleri kolayca subdomain’e göre yönlendirebilir.

Bu modelde, tüm kiracıların verileri genellikle tek bir Next.js uygulamasının derlenmiş çıktısı tarafından sunulur. Nginx veya Coolify’ın ters proxy’si, gelen isteğin subdomain’ini analiz eder ve bu bilgiye dayanarak Next.js uygulamasının hangi statik sayfayı veya içeriği sunması gerektiğini belirler. Örneğin, musteri-a.ajansim.com adresine gelen bir istek, Nginx tarafından yakalanır ve Next.js’in derlenmiş çıktısına yönlendirilir. Next.js uygulaması ise bu subdomain bilgisini kullanarak (eğer URL yapısına entegre edilmişse), “musteri-a”ya ait içeriği dinamik olarak yükleyip sunar. Bu, her kiracı için ayrı bir dağıtım veya ayrı bir Next.js projesi tutma zorunluluğunu ortadan kaldırır, bu da kaynak yönetimini ve dağıtım süreçlerini inanılmaz derecede basitleştirir. Elbette, bu yapı için wildcard DNS kaydına ihtiyacınız olacaktır (örneğin, *.ajansim.com gibi bir A kaydı veya CNAME kaydı). Bu sayede, oluşturulan her yeni subdomain otomatik olarak ana sunucunuza yönlendirilir.

Next.js Tarafında Veri ve İçerik Yönetimi

Çok kiracılı bir yapıda Next.js’in en kritik rollerinden biri, her kiracıya özel veriyi doğru bir şekilde çekmek ve statik sayfaları bu verilerle derlemektir. Bunu Next.js’in getStaticPaths ve getStaticProps fonksiyonları ile etkili bir şekilde yapabiliriz. Bu fonksiyonlar, derleme zamanında çalışır ve bizim için statik dosyaları oluşturur.

1. getStaticPaths: Dinamik Kiracı Yollarını Oluşturma

getStaticPaths, Next.js’e hangi dinamik yolların derleme zamanında statik olarak önceden oluşturulacağını bildirir. Bizim durumumuzda, bu fonksiyon, sisteme kayıtlı tüm kiracıların slug (URL dostu isim) listesini döndürecektir. Örneğin, bir API’den veya bir JSON dosyasından tüm kiracıların listesini çekebilir ve her biri için bir yol oluşturabiliriz.

export async function getStaticPaths() {
  // Veritabanından veya bir CMS'ten tüm kiracı sluglarını çekin
  const tenants = await fetch('https://api.yourdomain.com/tenants').then(res => res.json());

  const paths = tenants.map((tenant) => ({
    params: { tenantSlug: tenant.slug },
  }));

  return { paths, fallback: false }; // fallback: false yeni kiracılar için 404 döndürür, true ise anında oluşturur
}

Bu kod bloğu, sistemdeki tüm kiracılar için /nextjs-output/[tenantSlug] gibi statik URL'ler oluşturulmasını sağlar. Eğer yeni bir kiracı eklenirse, projenin yeniden derlenmesi gerekecektir (veya fallback: 'blocking' kullanılarak ilk istekte oluşturulabilir).

2. getStaticProps: Kiracıya Özel Verileri Çekme

getStaticProps, belirli bir kiracı slug'ına ait tüm veriyi derleme zamanında çeker. Bu veriler, kiracının temasını, logosunu, sayfa içeriklerini veya herhangi başka özelleştirilmiş bilgiyi içerebilir. Bu fonksiyon, Next.js sayfasının props'u olarak bu verileri döndürür ve sayfa bu verilerle statik olarak derlenir.

export async function getStaticProps({ params }) {
  const { tenantSlug } = params;

  // tenantSlug'a göre kiracı verilerini çekin
  const tenantData = await fetch(https://api.yourdomain.com/tenants/${tenantSlug}).then(res => res.json());

  // Kiracıya ait sayfa içeriklerini veya temayı da çekebilirsiniz
  const pageContent = await fetch(https://api.yourdomain.com/pages/${tenantSlug}/home).then(res => res.json());

  if (!tenantData) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      tenantData,
      pageContent,
    },
    revalidate: 60, // Saniyede bir içeriği kontrol et ve yeniden oluştur (isteğe bağlı)
  };
}

Bu yöntemle, her bir kiracı için tam olarak özelleştirilmiş, hızlı ve güvenli statik sayfalar oluşturabiliriz. Sayfanın kendisi daha sonra tenantData ve pageContent props'larını alarak ilgili kiracının içeriğini gösterebilir. Bu yapı, merkezi bir veri kaynağını (örneğin bir headless CMS, veritabanı veya API) kullanarak binlerce kiracının içeriğini tek bir Next.js projesi altında yönetmemizi sağlar. İçerik güncellemeleri, veri kaynağında yapıldığında ve proje yeniden derlendiğinde (Coolify aracılığıyla otomatik olarak), tüm statik siteler güncellenmiş içeriği yansıtır hale gelir.

Adım Adım Kurulum ve Yapılandırma: Uygulamalı Rehber

Teorik temelleri anladıktan sonra, şimdi sıra pratik uygulamaya geldi. Bu bölümde, Next.js projesini nasıl oluşturacağımızı, kiracı verilerini nasıl entegre edeceğimizi, Nginx ile subdomain yönlendirmesini nasıl yapılandıracağımızı ve son olarak Coolify üzerinde otomatik dağıtımı nasıl kuracağımızı adım adım ele alacağız. Bu adımlar, teoride bahsettiğimiz çok kiracılı statik site motorunu hayata geçirmemizi sağlayacak.

Next.js Projesi Oluşturma ve Kiracı Verilerini Entegre Etme

Öncelikle, yeni bir Next.js projesi oluşturalım. Terminalinizde aşağıdaki komutu çalıştırın:

npx create-next-app multi-tenant-engine --ts --eslint --app
cd multi-tenant-engine

Bu komut, TypeScript, ESLint ve yeni App Router ile Next.js projenizi başlatacaktır. Şimdi, kiracı verilerini yönetmek için basit bir yapı oluşturalım. Gerçek bir senaryoda bu veriler bir veritabanından, Headless CMS'ten veya API'den gelecektir. Biz örneğimiz için bir JSON dosyası kullanacağız.

data/tenants.json adında bir dosya oluşturun:

[
  {
    "id": "1",
    "slug": "kiraci1",
    "name": "Kiracı 1 Kurumsal Site",
    "theme": {
      "primaryColor": "#0070f3",
      "secondaryColor": "#1a1a1a"
    },
    "content": {
      "heroTitle": "Kiracı 1'e Hoş Geldiniz!",
      "heroDescription": "İşletmenizin dijital varlığını güçlendiriyoruz."
    }
  },
  {
    "id": "2",
    "slug": "kiraci2",
    "name": "Kiracı 2 E-ticaret Sitesi",
    "theme": {
      "primaryColor": "#ff0070",
      "secondaryColor": "#f0f0f0"
    },
    "content": {
      "heroTitle": "Kiracı 2 Özel Ürünleri Keşfedin!",
      "heroDescription": "En yeni ve en trend ürünler burada."
    }
  }
]

Şimdi, bu verilere dayanarak dinamik sayfalar oluşturacak bir Next.js sayfası (App Router ile) oluşturalım. app/[tenantSlug]/page.tsx dosyasını oluşturun:

import { notFound } from 'next/navigation';
import tenantsData from '@/data/tenants.json';

// Bu fonksiyon, Next.js'e hangi yolların derleme zamanında oluşturulacağını söyler
export async function generateStaticParams() {
  return tenantsData.map((tenant) => ({
    tenantSlug: tenant.slug,
  }));
}

// Bu Next.js sayfa bileşeni, her kiracıya özel içeriği gösterecek
interface TenantPageProps {
  params: {
    tenantSlug: string;
  };
}

export default function TenantPage({ params }: TenantPageProps) {
  const { tenantSlug } = params;

  // tenantSlug'a göre ilgili kiracının verilerini bul
  const tenant = tenantsData.find((t) => t.slug === tenantSlug);

  if (!tenant) {
    notFound(); // Kiracı bulunamazsa 404 sayfasına yönlendir
  }

  // Kiracıya özel renkleri CSS değişkenleri olarak ayarla
  const style = {
    '--primary-color': tenant.theme.primaryColor,
    '--secondary-color': tenant.theme.secondaryColor,
  } as React.CSSProperties; // TypeScript için tip zorlaması

  return (
    

      

        {tenant.content.heroTitle}
      
      

        {tenant.content.heroDescription}
      
      
Bu, {tenant.name} için özel olarak oluşturulmuş bir sayfadır.
      
        Daha Fazla Bilgi Edinin
      
    
  );
}

Bu yapı ile Next.js, npm run build komutu çalıştırıldığında kiraci1 ve kiraci2 için statik HTML sayfaları oluşturacaktır. Örnekte basit bir CSS kullanımı için inline style kullandım, gerçek projede Tailwind CSS veya CSS modülleri gibi bir çözüm tercih edilebilir. global.css dosyanıza da basit bir varsayılan renk tanımı ekleyebilirsiniz.

Nginx ile Dinamik Subdomain Yönlendirmesi Nasıl Yapılır?

Nginx, gelen istekleri subdomain'lerine göre doğru Next.js çıktısına yönlendirecek olan katmandır. Coolify genellikle bu yapılandırmayı sizin için otomatik yapar, ancak manuel olarak nasıl yapılacağını bilmek esneklik sağlar. Bir Nginx yapılandırma dosyası (örneğin /etc/nginx/sites-available/multi-tenant.conf) aşağıdaki gibi görünebilir:

server {
    listen 80;
    listen [::]:80;
    server_name *.yourdomain.com; # Wildcard subdomain dinle

    # Tüm HTTP isteklerini HTTPS'ye yönlendir
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name *.yourdomain.com; # Wildcard subdomain dinle

    # SSL sertifikaları (Let's Encrypt ile otomatik alınabilir veya manuel ayarlanabilir)
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/yourdomain.com/chain.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/multi-tenant-engine/.next/static; # Next.js statik dosyalarının konumu

    index index.html index.htm;

    location /_next/static {
        # Next.js statik varlıklarını doğrudan servis et
        alias /var/www/multi-tenant-engine/.next/static;
        expires 1y;
        access_log off;
        log_not_found off;
    }

    location / {
        # Eğer bir statik dosya bulunamazsa, Next.js'in statik HTML'ini sun
        # Next.js'in derlediği sayfalar için doğru dosyayı bulması gerekiyor
        try_files $uri $uri/ /$host$uri.html /$host/$uri /index.html =404;

        # Bu kısım, Coolify'ın Nginx/Caddy'yi nasıl yapılandırdığına göre değişebilir.
        # Genellikle Coolify, uygulamanın çıktısını doğrudan bir dizine yerleştirir ve o dizini root olarak ayarlar.
        # Eğer Next.js output'u .next/static içindeyse, yukarıdaki root ve try_files yeterli olabilir.
        # Eğer dinamik bir server-side logic olsaydı (SSG değil de SSR), reverse proxy kullanılırdı.
        # Ancak SSG'de, Next.js build çıktısı (HTML, CSS, JS) doğrudan servis edilir.

        # Kiracı slug'ını URL'den ayıklamak için karmaşık bir Nginx yeniden yazma kuralı gerekebilir,
        # ancak Next.js'in App Router yapısı (app/[tenantSlug]/page.tsx) bunu zaten içeriyor.
        # Yani Nginx'in tek yapması gereken, wildcard subdomain'i yakalayıp Next.js'in statik çıktı dizinine
        # istekleri yönlendirmek ve Next.js'in kendi routing mantığını kullanmasına izin vermektir.
        # Coolify bu kısmı çok basitleştirir.
    }

    error_page 404 /404.html; # Özel 404 sayfası
}

Bu yapılandırma, *.yourdomain.com gelen tüm HTTP isteklerini HTTPS'ye yönlendirecek ve ardından HTTPS isteklerini Next.js'in derlenmiş statik dosyalarının bulunduğu /var/www/multi-tenant-engine/.next/static dizinine yönlendirecektir. try_files yönergesi, gelen URL'ye göre ilgili statik dosyayı bulmaya çalışır. Bu Nginx ayarı, Next.js'in output: 'standalone' veya output: 'export' moduyla oluşturulmuş statik çıktısı için uygundur. Coolify kullandığınızda bu karmaşık Nginx yapılandırmalarını elle yapmanıza gerek kalmadığını unutmamak önemlidir.

Coolify Üzerinde Otomatik Dağıtım ve Yönetim

Coolify, GitHub gibi bir Git deposuna bağlandığınızda, projenizi otomatik olarak derleyip dağıtabilen bir CI/CD boru hattı sağlar. Bu, yeni bir kiracı eklediğinizde veya mevcut bir kiracının içeriğini güncellediğinizde (veritabanı veya CMS üzerinde), Coolify'ın otomatik olarak Next.js projenizi yeniden derlemesini ve yeni statik siteleri dağıtmasını tetikleyeceği anlamına gelir.

1. Coolify Sunucunuzu Kurun: İlk olarak, bir VPS'e (örneğin DigitalOcean, Hetzner) Coolify'ı kurmanız gerekir. Kurulum adımları Coolify'ın kendi dokümantasyonunda detaylıca anlatılmıştır.

2. Git Deposu Entegrasyonu: Coolify kontrol paneline giriş yapın. Yeni bir "Application" oluşturun. "Source" olarak GitHub, GitLab veya kendi Git sunucunuzu seçin ve Next.js projenizin deposunu bağlayın. Coolify, depoyu izleyecek ve her "push" işleminde veya belirli bir dalda değişiklik olduğunda dağıtımı tetikleyecektir.

3. Build ve Dağıtım Ayarları:

• Build Pack: Next.js için "Static" veya "Node.js" build pack'ini seçebilirsiniz. Next.js'in kendi statik çıktısını kullanacağımız için, genellikle "Static" daha uygundur. Coolify, Next.js projenizi tanıyacak ve otomatik olarak npm install ve npm run build komutlarını çalıştıracaktır.
• Build Komutları: Varsayılan komutlar yeterli olacaktır (npm install, npm run build).
• Root Dizin: Next.js'in statik çıktısının bulunduğu dizini belirtin. Genellikle .next/static veya out (eğer next export kullanılıyorsa) olacaktır. App Router ile .next/static içindeki HTML dosyaları root'tan servis edilebilir.
• Domain: Uygulamanız için ana domain'i (örneğin yourdomain.com) ve wildcard subdomain'i (*.yourdomain.com) ekleyin. Coolify, bu subdomainler için otomatik olarak Nginx/Caddy yapılandırmasını ve SSL sertifikalarını (Let's Encrypt ile) yönetecektir. Bu, Nginx'i manuel olarak yapılandırma ihtiyacınızı ortadan kaldırır.

Coolify'ın gücü, tüm bu adımları tek bir platformdan yönetmenize olanak sağlamasıdır. Yeni bir kiracı eklediğinizde, sadece veri kaynağınızı güncellersiniz (örneğin tenants.json dosyasını veya Headless CMS'inizi). Git deponuza yaptığınız bu değişiklikleri push ettiğinizde, Coolify otomatik olarak yeni build'i tetikleyecek, Next.js tüm statik sayfaları (yeni kiracı da dahil) yeniden oluşturacak ve Coolify bu yeni statik çıktıyı sunucularınıza dağıtacaktır. Bu, sıfır kesinti süresiyle (zero-downtime) sürekli ve otomatik bir dağıtım süreci sağlar.

Performans, Ölçeklenebilirlik ve Güvenlik İpuçları

Çok kiracılı statik site motorunuzu kurduktan sonra, onu daha da güçlendirmek ve geleceğe hazır hale getirmek için performans, ölçeklenebilirlik ve güvenlik konularına odaklanmak hayati önem taşır. Bu optimizasyonlar, hem kullanıcı deneyimini artıracak hem de sisteminizin daha uzun ömürlü ve kararlı olmasını sağlayacaktır.

Performans İpuçları

1. CDN Kullanımı: Statik siteler, CDN'ler için biçilmiş kaftandır. Next.js'in derlenmiş HTML, CSS, JavaScript ve görsel varlıklarını bir CDN (Cloudflare, AWS CloudFront, BunnyCDN vb.) üzerinden sunarak, kullanıcılarınıza coğrafi olarak en yakın sunucudan içerik sağlamış olursunuz. Bu, yükleme sürelerini dramatik şekilde düşürür. Coolify genellikle CDN entegrasyonu için kolay seçenekler sunar veya harici bir CDN'i kendi DNS ayarlarınız üzerinden kolayca bağlayabilirsiniz.
2. Next.js Görüntü Optimizasyonu: Next.js'in Image bileşenini kullanarak görselleri otomatik olarak optimize edin. Bu bileşen, görselleri modern formatlara (WebP gibi) dönüştürür, farklı cihaz boyutları için responsive versiyonlarını oluşturur ve lazy-loading (tembel yükleme) uygulayarak sayfa hızını artırır.
3. Tarayıcı Önbellekleme: Nginx veya CDN ayarlarınızda HTTP başlıkları (Cache-Control, Expires) aracılığıyla tarayıcı önbelleklemesini etkinleştirin. Özellikle değişmeyen statik varlıklar (CSS, JS, fontlar) için uzun ömürlü önbellekleme süreleri belirleyin. Bu, tekrar ziyaret eden kullanıcılar için sitenin anında yüklenmesini sağlar.
4. Kod Bölme (Code Splitting) ve Ağaç Sallama (Tree Shaking): Next.js, varsayılan olarak kod bölmeyi yapar, yani her sayfa için sadece o sayfada kullanılan JavaScript kodunu yükler. Gerekli olmayan kodları elemek için "tree shaking" özelliğini kullanın. Bu, yüklenen JavaScript dosya boyutlarını azaltarak ilk yükleme süresini optimize eder.

Ölçeklenebilirlik Stratejileri

1. Statik Yapının Kendisi: Statik siteler doğaları gereği çok yüksek oranda ölçeklenebilir. Sunucu tarafında dinamik bir işlem olmadığı için, aynı statik dosyaları milyonlarca kez sunmak, bir uygulama sunucusuna kıyasla çok daha az kaynak gerektirir.
2. Veri Kaynağını Ölçeklendirme: Kiracı verilerini çektiğiniz arka uç sistemini (Headless CMS, API, veritabanı) ölçeklenebilir tutun. Eğer kiracı sayınız binlere ulaşırsa, bu veri kaynağının performanslı olması kritikleşecektir. API önbellekleme ve veritabanı optimizasyonları burada devreye girer.
3. CI/CD Boru Hattı Optimizasyonu: Kiracı sayınız arttıkça, Next.js projenizin derleme süreleri uzayabilir. Coolify gibi araçlar bu süreçleri optimize etmek için dağıtık derleme veya paralel build gibi özellikler sunabilir. Build süresini kısaltmak, yeni içeriklerin veya kiracıların daha hızlı yayına alınmasını sağlar.

Güvenlik Önlemleri

1. SSL/TLS Kullanımı: Tüm trafiği HTTPS üzerinden şifreleyin. Nginx ve Coolify, Let's Encrypt ile kolayca ücretsiz SSL sertifikaları almanıza ve yönetmenize olanak tanır. Bu, veri bütünlüğünü ve kullanıcı gizliliğini sağlar.
2. Güvenlik Başlıkları: Nginx yapılandırmanızda HTTP güvenlik başlıklarını (Content-Security-Policy, X-Frame-Options, X-XSS-Protection vb.) ekleyin. Bu başlıklar, XSS, tıklama dolandırıcılığı (clickjacking) gibi yaygın web saldırılarına karşı koruma sağlar.
3. Sürüm Kontrolü ve Bağımlılık Güncellemeleri: Next.js ve diğer npm bağımlılıklarınızı düzenli olarak güncel tutun. Güvenlik açıklarının çoğu eski veya güncellenmemiş kütüphanelerden kaynaklanır. Automated tools (dependabot gibi) bu süreci kolaylaştırabilir.
4. İzolasyon: Her ne kadar aynı kod tabanını paylaşsak da, kiracı verileri arasında mantıksal bir ayrım olduğundan emin olun. Kiracılar, birbirlerinin verilerine erişememeli veya değiştirememelidir. Özellikle veri çekme API'lerinizde bu izolasyonun sağlandığından emin olun.
5. Bot Koruması ve DDoS Azaltma: CDN servisleri (özellikle Cloudflare gibi) genellikle bot koruması ve temel DDoS azaltma yetenekleri sunar. Bu, sitelerinizi kötü niyetli trafikten korur.

Gerçek Dünya Senaryoları ve Vaka Analizi

Şimdiye kadar ele aldığımız mimari, kulağa teknik gelse de, gerçek dünyadaki pek çok iş problemini çözmek için birebirdir. Bu bölümde, bahsettiğimiz "Next.js, Nginx ve Coolify ile Çok Kiracılı Statik Site Motoru"nun hangi senaryolarda hayat kurtarıcı olabileceğine dair iki farklı vaka analizini inceleyeceğiz.

Vaka Analizi 1: Küçük İşletmeler İçin Web Sitesi Sağlayan Dijital Ajans

Problem: "Gelecek Dijital" adında bir ajans, yerel esnaf ve küçük işletmeler için uygun maliyetli web siteleri tasarlayıp barındırma hizmeti sunmaktadır. Ajans, her yeni müşteri için sıfırdan bir WordPress kurulumu yapmak veya ayrı hosting hesapları yönetmek zorunda kalıyordu. Bu durum, her web sitesinin kurulumu, bakımı ve güncellenmesi için önemli bir zaman ve kaynak harcamasına neden oluyordu. Performans sorunları, güvenlik açıkları ve yükselen barındırma maliyetleri de cabasıydı. Ajansın büyüme kapasitesi, operasyonel yük nedeniyle sınırlanmıştı.

Çözüm: Gelecek Dijital, çok kiracılı statik site motoru mimarisine geçmeye karar verdi. Next.js ile temel web sitesi şablonlarını oluşturdular. Her müşteri için (örneğin, firin.gelecekdijital.com, cicekci.gelecekdijital.com gibi) subdomain'ler üzerinden erişilebilen statik siteler hazırladılar. Müşteri verileri (iletişim bilgileri, hizmetler, galeriler vb.) merkezi bir Headless CMS'te tutuldu. Coolify, Next.js projesinin otomatik dağıtımını üstlendi. Ajans, her yeni müşteri için sadece Headless CMS'e yeni bir kayıt ekliyor ve Git deposuna küçük bir güncelleme (örneğin, tenant.json dosyasındaki bir giriş) push ediyordu. Coolify bu değişikliği algılayıp, projenin yeniden derlenmesini ve yeni müşterinin statik sitesinin otomatik olarak yayına alınmasını sağlıyordu.

Sonuçlar:

• Düşük Maliyet: Her müşteri için ayrı bir sunucu yerine tek bir sunucuda (veya Coolify'ın optimize ettiği altyapıda) binlerce statik site barındırabildiler.
• Yüksek Performans: Statik siteler sayesinde müşteri siteleri anında yükleniyor, bu da SEO performansını artırıyor ve müşteri memnuniyetini yükseltiyordu.
• Hızlandırılmış Dağıtım: Yeni bir müşterinin web sitesi, CMS'e veri girildikten ve Coolify tetiklendikten sonra dakikalar içinde yayına alınabiliyordu.
• Basit Yönetim: Tüm sitelerin bakımı, güvenlik yamaları ve güncellemeleri tek bir Next.js kod tabanı üzerinden merkezi olarak yapılıyordu.
• Güvenlik: Statik yapı, geleneksel dinamik sitelere göre çok daha az saldırı yüzeyi sunuyordu.

Vaka Analizi 2: SaaS Platformu İçin Kişiselleştirilmiş Açılış Sayfaları

Problem: Bir pazarlama otomasyonu SaaS'ı olan "LeadFlow", müşterilerine özel kampanyalar için kişiselleştirilmiş açılış sayfaları (landing pages) oluşturma imkanı sunuyordu. Ancak mevcut sistemleri, her yeni açılış sayfası için manuel ayarlamalar gerektiriyor, bu da müşterilerin yeni kampanya başlatma sürelerini uzatıyordu. Ayrıca, her açılış sayfasının farklı bir URL'e sahip olması ve hızlı yüklenmesi kritikti, ancak mevcut dinamik sayfa oluşturma sistemi performans sorunları yaşıyordu.

Çözüm: LeadFlow, Next.js, Nginx ve Coolify üçlüsünü kullanarak müşterilerine özel, çok kiracılı bir açılış sayfası motoru geliştirdi. Her LeadFlow müşterisi, kendi kampanya yöneticisi panelinden açılış sayfası içeriğini (metinler, görseller, CTA'lar) belirliyor ve bu veriler LeadFlow'un API'sine kaydediliyordu. Next.js uygulaması, bu API'den gelen verileri kullanarak derleme zamanında her bir müşterinin her bir kampanyası için benzersiz bir statik açılış sayfası oluşturuyordu (örneğin, kampanya1.musteri.leadflow.com). Coolify, bu Next.js projesinin sürekli dağıtımını yönetiyordu. Müşteri, panelinden bir değişiklik yaptığında, bir webhook Coolify'ı tetikliyor ve ilgili açılış sayfası yeniden derlenip anında güncelleniyordu.

Sonuçlar:

• Müşteri Esnekliği: Müşteriler kendi açılış sayfalarını çok hızlı bir şekilde oluşturup güncelleyebiliyorlardı.
• Yüksek Dönüşüm Oranları: Yüksek hızlı statik açılış sayfaları, daha iyi kullanıcı deneyimi ve dolayısıyla daha yüksek dönüşüm oranları sağlıyordu.
• Ölçeklenebilirlik: On binlerce farklı açılış sayfasını sorunsuz bir şekilde barındırabildiler ve yönetebildiler.
• Entegrasyon Kolaylığı: Mevcut SaaS platformları ile API tabanlı entegrasyon kolayca sağlandı.
• Marka Kimliği: Her açılış sayfası, müşterinin kendi markasına uygun olarak özelleştirilebiliyordu.

Bu vaka analizleri, çok kiracılı statik site motoru mimarisinin sadece teknik bir çözüm olmadığını, aynı zamanda işletmelerin operasyonel verimliliğini artıran ve rekabet avantajı sağlayan stratejik bir araç olduğunu göstermektedir. Bu yapı, özellikle çok sayıda benzer yapıda web varlığı yönetmesi gereken senaryolar için idealdir.

Sonuç ve Sıkça Sorulan Sorular

Bu makale boyunca, Next.js, Nginx ve Coolify'ı bir araya getirerek güçlü, ölçeklenebilir ve yönetimi kolay bir çok kiracılı statik site motoru mimarisini nasıl kuracağımızı ayrıntılı bir şekilde inceledik. Gördüğümüz gibi, Next.js'in statik site oluşturma yetenekleri, Nginx'in esnek yönlendirme gücü ve Coolify'ın otomasyon kolaylığı birleştiğinde, geleneksel web sitesi yönetimiyle ilgili birçok zorluğun üstesinden gelinebilir. Bu mimari, özellikle birden fazla web sitesi veya mikro site yönetmesi gereken dijital ajanslar, SaaS sağlayıcıları veya büyük kurumlar için ideal bir çözüm sunar. Performans artışı, güvenlik iyileştirmeleri ve operasyonel maliyetlerdeki düşüş, bu yaklaşımın sunduğu temel avantajlardır.

Statik sitelerin doğasında var olan hız ve güvenlik avantajlarını, Next.js'in modern geliştirme deneyimiyle birleştirerek dinamik içerik ihtiyaçlarınıza cevap verebilen bir yapı kurmuş olduk. Nginx, subdomain bazlı yönlendirmeleri ele alarak her kiracıya kendi özel alan adını sunarken, Coolify ise tüm dağıtım, yönetim ve sertifika süreçlerini otomatikleştirerek DevOps yükünü omuzlarımızdan aldı. Bu entegrasyon sayesinde, yeni kiracıları eklemek veya mevcut siteleri güncellemek, artık manuel ve hataya açık süreçler olmaktan çıkıp, hızlı ve otomatik bir boru hattına dönüşüyor. Gelecekte bu mimari, sunucusuz fonksiyonlar (serverless functions) ile daha da genişletilerek, statik sitelerin dinamik ihtiyaçlarını daha da fazla karşılayabilir ve daha karmaşık etkileşimler için esneklik sağlayabilir. Bu sayede, geleceğin web uygulamaları için sağlam bir temel oluşturulmuş olur.

Sıkça Sorulan Sorular

1. Bu mimari ne tür projeler için idealdir?
Bu mimari, özellikle çok sayıda benzer yapıda (örneğin, aynı temel şablonu kullanan ama içerikleri farklı olan) web sitesi veya mikro site yönetmesi gereken projeler için idealdir. Dijital ajanslar, yerel işletmeler için web sitesi sağlayan SaaS şirketleri, e-ticaret siteleri için kişiselleştirilmiş açılış sayfaları sunan pazarlama platformları veya kurum içi departman siteleri gibi senaryolar bu yapıdan büyük fayda sağlayabilir.

2. Veri tabanı yönetimi nasıl yapılır?
Statik siteler doğrudan bir veritabanına bağlanmaz. Kiracıya özel veriler (içerikler, ayarlar vb.) derleme zamanında (Next.js'in getStaticProps fonksiyonu aracılığıyla) bir API, Headless CMS (örneğin Contentful, Strapi, Sanity), JSON dosyaları veya başka bir merkezi veri kaynağından çekilir. Bu veri kaynakları ayrı bir sunucu veya servis üzerinde barındırılır ve kendi veritabanı yönetimlerini kullanır.

3. Yeni bir kiracı eklemek ne kadar sürer?
Yeni bir kiracı eklemek, veri kaynağınıza (Headless CMS veya API) yeni kiracı bilgilerini eklemek ve ardından Next.js projesinin yeniden derlenmesini tetiklemekle mümkündür. Coolify'ın otomatik dağıtım boru hattı sayesinde, bu işlem veri girişi sonrası birkaç dakika içinde tamamlanabilir ve yeni kiracının statik sitesi otomatik olarak yayına alınır.

4. SEO performansı nasıl etkilenir?
Bu mimari, SEO performansı açısından oldukça avantajlıdır. Statik siteler, çok hızlı yüklenir, bu da Google'ın sıralama faktörlerinden biri olan sayfa hızı metriklerini (Core Web Vitals) iyileştirir. Her kiracının kendine ait ayrı bir subdomain'de olması, arama motorlarının her siteyi ayrı bir varlık olarak indekslemesine olanak tanır. Next.js'in sunduğu meta etiket yönetimi ve semantik HTML yapısı da SEO'yu destekler. Doğru bir içerik stratejisi ve düzenli güncellemelerle yüksek SEO performansı elde edilebilir.