Pek \u00e7ok i\u015fletmenin veya ajans\u0131n kar\u015f\u0131la\u015ft\u0131\u011f\u0131 ortak bir sorun var: M\u00fc\u015fterileri i\u00e7in onlarca, hatta y\u00fczlerce web sitesini y\u00f6netmek. Her bir site i\u00e7in ayr\u0131 bir sunucu yap\u0131land\u0131rmak, da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini otomatikle\u015ftirmek ve performans\u0131 y\u00fcksek tutmak zamanla i\u00e7inden \u00e7\u0131k\u0131lmaz bir hale gelebilir. Peki, ayn\u0131 anda birden fazla kirac\u0131ya (m\u00fc\u015fteriye) hizmet veren, h\u0131zl\u0131, g\u00fcvenli ve kolayca \u00f6l\u00e7eklenebilen statik siteleri nas\u0131l in\u015fa edebilirsiniz? Bu rehberde, Next.js’in statik site olu\u015fturma yeteneklerini, Nginx’in g\u00fc\u00e7l\u00fc y\u00f6nlendirme \u00f6zelliklerini ve Coolify’\u0131n modern DevOps otomasyonunu birle\u015ftirerek bu karma\u015f\u0131k problemi \u00e7\u00f6zen bir \u00e7ok kirac\u0131l\u0131 statik site motoru mimarisini ad\u0131m ad\u0131m inceleyece\u011fiz. Bu \u00e7\u00f6z\u00fcmle, da\u011f\u0131t\u0131m s\u00fcre\u00e7lerinizi basitle\u015ftirirken ayn\u0131 zamanda maliyetleri d\u00fc\u015f\u00fcrerek y\u00fcksek performansl\u0131 bir altyap\u0131 kurabileceksiniz.<\/p>\n
G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, i\u015fletmelerin \u00e7evrimi\u00e7i varl\u0131\u011f\u0131 hi\u00e7 olmad\u0131\u011f\u0131 kadar kritik. \u00d6zellikle ajanslar, SaaS \u015firketleri veya b\u00fcy\u00fck kurumsal yap\u0131lar\u0131n farkl\u0131 departmanlar\u0131 i\u00e7in birden fazla web sitesi veya mikro site y\u00f6netme ihtiyac\u0131 do\u011fabiliyor. Bu durum, her site i\u00e7in ayr\u0131 bir hosting, s\u00fcrekli g\u00fcncellemeler, g\u00fcvenlik yamalar\u0131 ve performans optimizasyonlar\u0131 gibi bir dizi zorlu\u011fu beraberinde getiriyor. Bu karma\u015f\u0131kl\u0131k, geli\u015ftirme ekiplerinin verimlili\u011fini d\u00fc\u015f\u00fcr\u00fcrken, operasyonel maliyetleri de \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131yor. Geleneksel yakla\u015f\u0131mlarla her yeni proje, genellikle mevcut altyap\u0131ya yeni bir y\u00fck getiriyor ve bu da uzun vadede \u00f6l\u00e7eklenebilirlik sorunlar\u0131na yol a\u00e7\u0131yor.<\/p>\n
Bir an d\u00fc\u015f\u00fcn\u00fcn: Yeni bir m\u00fc\u015fteri edindiniz ve ona \u00f6zel bir a\u00e7\u0131l\u0131\u015f sayfas\u0131 veya tam te\u015fekk\u00fcll\u00fc bir web sitesi olu\u015fturman\u0131z gerekiyor. Mevcut yap\u0131n\u0131zda bu s\u00fcre\u00e7 ne kadar zaman al\u0131yor? Yeni bir veritaban\u0131 m\u0131 kuruyorsunuz, yeni bir sunucu mu ayarl\u0131yorsunuz, yoksa mevcut projenizi mi kopyalay\u0131p de\u011fi\u015fiklikler yap\u0131yorsunuz? Bu senaryolar\u0131n her biri, \u00f6nemli \u00f6l\u00e7\u00fcde manuel \u00e7aba gerektiren ve hataya a\u00e7\u0131k s\u00fcre\u00e7lerdir. \u0130\u015fte tam da bu noktada, \u00e7ok kirac\u0131l\u0131 (multi-tenant) bir mimari devreye giriyor. \u00c7ok kirac\u0131l\u0131 bir yap\u0131, birden fazla m\u00fc\u015fterinin veya uygulaman\u0131n ayn\u0131 temel altyap\u0131 ve kod taban\u0131n\u0131 payla\u015fmas\u0131na olanak tan\u0131r. Bu sayede, her m\u00fc\u015fteriye \u00f6zel bir deneyim sunarken, geli\u015ftirme, da\u011f\u0131t\u0131m ve bak\u0131m s\u00fcre\u00e7lerini merkezile\u015ftirebilirsiniz. Bu yakla\u015f\u0131m, kaynak kullan\u0131m\u0131n\u0131 optimize eder, maliyetleri d\u00fc\u015f\u00fcr\u00fcr ve yeni kirac\u0131lar\u0131n sisteme entegrasyonunu h\u0131zland\u0131r\u0131r.<\/p>\n
Statik siteler ise bu denklemin performans ve g\u00fcvenlik taraf\u0131n\u0131 g\u00fc\u00e7lendirir. Sunucu taraf\u0131nda dinamik i\u015flemlerin minimuma indirilmesi, sitelerin \u00e7ok daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Bu h\u0131z, hem kullan\u0131c\u0131 deneyimi hem de arama motoru optimizasyonu (SEO) i\u00e7in kritik \u00f6neme sahiptir. Ayr\u0131ca, daha az sunucu taraf\u0131 mant\u0131\u011f\u0131 demek, daha az sald\u0131r\u0131 y\u00fczeyi ve dolay\u0131s\u0131yla daha y\u00fcksek g\u00fcvenlik demektir. Ancak, statik siteler de kendi i\u00e7inde y\u00f6netim zorluklar\u0131 bar\u0131nd\u0131rabilir; \u00f6zellikle dinamik i\u00e7erik g\u00fcncellemeleri veya birden fazla siteyi ayn\u0131 \u00e7at\u0131 alt\u0131nda y\u00f6netme ihtiyac\u0131 duyuldu\u011funda. \u0130\u015fte Next.js, Nginx ve Coolify \u00fc\u00e7l\u00fcs\u00fc, bu zorluklar\u0131 a\u015farak hem g\u00fc\u00e7l\u00fc hem de esnek bir \u00e7\u00f6z\u00fcm sunuyor. Bu makalede, bu g\u00fc\u00e7l\u00fc bile\u015fenleri bir araya getirerek, sadece h\u0131zl\u0131 ve g\u00fcvenli de\u011fil, ayn\u0131 zamanda y\u00f6netimi kolay ve \u00f6l\u00e7eklenebilir bir \u00e7ok kirac\u0131l\u0131 statik site motoru nas\u0131l in\u015fa edece\u011finizi detayl\u0131ca ele alaca\u011f\u0131z. Amac\u0131m\u0131z, geli\u015ftirme s\u00fcre\u00e7lerinizi optimize ederek, i\u015finize de\u011fer katacak yeniliklere daha fazla odaklanman\u0131z\u0131 sa\u011flamakt\u0131r.<\/p>\n
\u00c7ok kirac\u0131l\u0131 statik site motorumuzun mimarisini in\u015fa etmeden \u00f6nce, kullanaca\u011f\u0131m\u0131z anahtar teknolojileri ve her birinin bu yap\u0131da oynad\u0131\u011f\u0131 rol\u00fc derinlemesine anlamam\u0131z gerekiyor. Bu b\u00f6l\u00fcmde Next.js, Nginx ve Coolify’\u0131n temel \u00f6zelliklerini, avantajlar\u0131n\u0131 ve projemizdeki i\u015flevlerini ayr\u0131 ayr\u0131 inceleyece\u011fiz. Bu ara\u00e7lar\u0131n birle\u015fimi, bize g\u00fc\u00e7l\u00fc, esnek ve y\u00f6netilebilir bir altyap\u0131 sunacakt\u0131r.<\/p>\n
Next.js, React tabanl\u0131 bir framework olup, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in bir\u00e7ok g\u00fc\u00e7l\u00fc \u00f6zellik sunar. Bu \u00f6zelliklerden en \u00f6nemlilerinden biri de Statik Site \u00dcretimi (Static Site Generation – SSG) yetene\u011fidir. SSG, web sitenizin i\u00e7eri\u011finin derleme (build) zaman\u0131nda HTML, CSS ve JavaScript dosyalar\u0131 olarak olu\u015fturulmas\u0131n\u0131 sa\u011flar. Yani, kullan\u0131c\u0131 bir sayfay\u0131 talep etti\u011finde, sunucunun dinamik olarak i\u00e7erik \u00fcretmesine gerek kalmaz; zaten haz\u0131rlanm\u0131\u015f olan statik dosyalar do\u011frudan sunulur.<\/p>\n
Peki, SSG’nin avantajlar\u0131 nelerdir ve neden bizim \u00e7ok kirac\u0131l\u0131 statik site motorumuz i\u00e7in ideal bir se\u00e7imdir? \u00d6ncelikle, performans<\/strong>. Statik dosyalar, sunucu taraf\u0131nda i\u015fleme s\u00fcresi gerektirmedi\u011fi i\u00e7in inan\u0131lmaz derecede h\u0131zl\u0131 y\u00fcklenir. Bu, \u00f6zellikle b\u00fcy\u00fck ve i\u00e7erik yo\u011fun sitelerde kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u0130kincisi, g\u00fcvenlik<\/strong>. Arka u\u00e7 sunucu taraf\u0131nda daha az mant\u0131k \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131 da azal\u0131r. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, maliyet etkinli\u011fi<\/strong>. Statik dosyalar, bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden kolayca sunulabilir, bu da trafik maliyetlerini d\u00fc\u015f\u00fcr\u00fcr ve sunucu y\u00fck\u00fcn\u00fc azalt\u0131r. Ayr\u0131ca, sunucusuz mimarilerle m\u00fckemmel bir uyum i\u00e7indedir. Next.js’in Nginx (Engine-X olarak telaffuz edilir), d\u00fcnyan\u0131n en pop\u00fcler a\u00e7\u0131k kaynakl\u0131 web sunucular\u0131ndan biridir ve ayn\u0131 zamanda bir ters proxy (reverse proxy), y\u00fck dengeleyici (load balancer) ve HTTP \u00f6nbellekleyici olarak da i\u015flev g\u00f6r\u00fcr. Y\u00fcksek performans\u0131, kararl\u0131l\u0131\u011f\u0131 ve d\u00fc\u015f\u00fck kaynak t\u00fcketimi ile bilinir. Bizim mimarimizde Nginx’in temel rol\u00fc, gelen isteklere do\u011fru Next.js statik \u00e7\u0131kt\u0131s\u0131n\u0131 y\u00f6nlendirmek olacakt\u0131r, \u00f6zellikle de subdomain bazl\u0131 \u00e7ok kirac\u0131l\u0131 yap\u0131y\u0131 y\u00f6netmek.<\/p>\n Nginx, \u00f6zellikle subdomain routing konusunda \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr. \u00d6rne\u011fin, Coolify, a\u00e7\u0131k kaynakl\u0131, kendi kendine bar\u0131nd\u0131r\u0131labilen (self-hosted) bir DevOps platformudur. Netlify, Vercel veya Heroku gibi pop\u00fcler bulut servislerine benzer i\u015flevler sunar, ancak kontrol tamamen sizdedir. Coolify, uygulamalar\u0131, veritabanlar\u0131n\u0131 ve servisleri kolayca da\u011f\u0131tman\u0131za, y\u00f6netmenize ve \u00f6l\u00e7eklendirmenize olanak tan\u0131r. Git entegrasyonu sayesinde, kodunuzu push etti\u011finizde otomatik olarak uygulamalar\u0131n\u0131z\u0131 derleyip da\u011f\u0131tabilen s\u00fcrekli entegrasyon ve s\u00fcrekli da\u011f\u0131t\u0131m (CI\/CD) s\u00fcre\u00e7leri olu\u015fturabilirsiniz.<\/p>\n Projemizde Coolify, t\u00fcm altyap\u0131m\u0131z\u0131n y\u00f6netim katman\u0131 olarak g\u00f6rev yapacakt\u0131r. Next.js uygulamam\u0131z\u0131n kaynak kodunu bir Git deposundan (\u00f6rne\u011fin GitHub veya GitLab) otomatik olarak \u00e7ekip derleyecek, statik \u00e7\u0131kt\u0131lar\u0131 olu\u015fturacak ve belirlenen sunucularda da\u011f\u0131tacakt\u0131r. Nginx yap\u0131land\u0131rmas\u0131n\u0131 manuel olarak yapmak yerine, Coolify genellikle kendi ters proxy’sini (Caddy veya Nginx) otomatik olarak yap\u0131land\u0131rarak subdomain y\u00f6nlendirmelerini basitle\u015ftirir ve SSL sertifikalar\u0131n\u0131 y\u00f6netir. Bu, geli\u015ftiricilerin altyap\u0131 detaylar\u0131yla u\u011fra\u015fmak yerine do\u011frudan uygulama geli\u015ftirmeye odaklanmas\u0131n\u0131 sa\u011flar. Coolify’\u0131n sundu\u011fu izleme (monitoring) ve g\u00fcnl\u00fck (logging) yetenekleri sayesinde, sitelerinizin durumunu kolayca takip edebilir ve potansiyel sorunlara h\u0131zl\u0131ca m\u00fcdahale edebilirsiniz. K\u0131sacas\u0131, Coolify, bu \u00e7ok kirac\u0131l\u0131 statik site motorunun da\u011f\u0131t\u0131m, y\u00f6netim ve otomasyon omurgas\u0131n\u0131 olu\u015fturur, t\u00fcm s\u00fcreci u\u00e7tan uca y\u00f6netir.<\/p>\n \u00c7ok kirac\u0131l\u0131 bir mimari tasarlarken en kritik kararlardan biri, kirac\u0131lar\u0131 birbirinden nas\u0131l ay\u0131raca\u011f\u0131m\u0131z ve her kirac\u0131ya \u00f6zg\u00fc i\u00e7eri\u011fi nas\u0131l sunaca\u011f\u0131m\u0131zd\u0131r. Bu b\u00f6l\u00fcmde, subdomain bazl\u0131 kirac\u0131l\u0131k modelini derinlemesine inceleyecek ve Next.js taraf\u0131nda veri ve i\u00e7erik y\u00f6netimini nas\u0131l ele alabilece\u011fimizi ele alaca\u011f\u0131z. Bu yakla\u015f\u0131mlar, esnek, \u00f6l\u00e7eklenebilir ve kolay y\u00f6netilebilir bir sistem olu\u015fturmam\u0131z i\u00e7in temel te\u015fkil edecektir.<\/p>\n Subdomain bazl\u0131 \u00e7ok kirac\u0131l\u0131l\u0131k, her kirac\u0131n\u0131n kendi \u00f6zel subdomain (alt alan ad\u0131) \u00fczerinden i\u00e7eri\u011fine eri\u015fti\u011fi bir modeldir. \u00d6rne\u011fin, bir web ajans\u0131, m\u00fc\u015fteri A i\u00e7in Bu modelde, t\u00fcm kirac\u0131lar\u0131n verileri genellikle tek bir Next.js uygulamas\u0131n\u0131n derlenmi\u015f \u00e7\u0131kt\u0131s\u0131 taraf\u0131ndan sunulur. Nginx veya Coolify’\u0131n ters proxy’si, gelen iste\u011fin subdomain’ini analiz eder ve bu bilgiye dayanarak Next.js uygulamas\u0131n\u0131n hangi statik sayfay\u0131 veya i\u00e7eri\u011fi sunmas\u0131 gerekti\u011fini belirler. \u00d6rne\u011fin, \u00c7ok kirac\u0131l\u0131 bir yap\u0131da Next.js’in en kritik rollerinden biri, her kirac\u0131ya \u00f6zel veriyi do\u011fru bir \u015fekilde \u00e7ekmek ve statik sayfalar\u0131 bu verilerle derlemektir. Bunu Next.js’in 1. getStaticPaths: Dinamik Kirac\u0131 Yollar\u0131n\u0131 Olu\u015fturma<\/strong><\/p>\n <\/code><\/p>\n Bu kod blo\u011fu, sistemdeki t\u00fcm kirac\u0131lar i\u00e7in 2. getStaticProps: Kirac\u0131ya \u00d6zel Verileri \u00c7ekme<\/strong><\/p>\n <\/code><\/p>\n Bu y\u00f6ntemle, her bir kirac\u0131 i\u00e7in tam olarak \u00f6zelle\u015ftirilmi\u015f, h\u0131zl\u0131 ve g\u00fcvenli statik sayfalar olu\u015fturabiliriz. Sayfan\u0131n kendisi daha sonra Teorik temelleri anlad\u0131ktan sonra, \u015fimdi s\u0131ra pratik uygulamaya geldi. Bu b\u00f6l\u00fcmde, Next.js projesini nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131, kirac\u0131 verilerini nas\u0131l entegre edece\u011fimizi, Nginx ile subdomain y\u00f6nlendirmesini nas\u0131l yap\u0131land\u0131raca\u011f\u0131m\u0131z\u0131 ve son olarak Coolify \u00fczerinde otomatik da\u011f\u0131t\u0131m\u0131 nas\u0131l kuraca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu ad\u0131mlar, teoride bahsetti\u011fimiz \u00e7ok kirac\u0131l\u0131 statik site motorunu hayata ge\u00e7irmemizi sa\u011flayacak.<\/p>\n \u00d6ncelikle, yeni bir Next.js projesi olu\u015ftural\u0131m. Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n <\/code><\/p>\n Bu komut, TypeScript, ESLint ve yeni App Router ile Next.js projenizi ba\u015flatacakt\u0131r. \u015eimdi, kirac\u0131 verilerini y\u00f6netmek i\u00e7in basit bir yap\u0131 olu\u015ftural\u0131m. Ger\u00e7ek bir senaryoda bu veriler bir veritaban\u0131ndan, Headless CMS'ten veya API'den gelecektir. Biz \u00f6rne\u011fimiz i\u00e7in bir JSON dosyas\u0131 kullanaca\u011f\u0131z.<\/p>\n <\/code><\/p>\n \u015eimdi, bu verilere dayanarak dinamik sayfalar olu\u015fturacak bir Next.js sayfas\u0131 (App Router ile) olu\u015ftural\u0131m. \n {tenant.content.heroDescription}\n <\/p>\n Bu, {tenant.name}<\/strong> i\u00e7in \u00f6zel olarak olu\u015fturulmu\u015f bir sayfad\u0131r.<\/p>\n <\/code><\/p>\n Bu yap\u0131 ile Next.js, Nginx, gelen istekleri subdomain'lerine g\u00f6re do\u011fru Next.js \u00e7\u0131kt\u0131s\u0131na y\u00f6nlendirecek olan katmand\u0131r. Coolify genellikle bu yap\u0131land\u0131rmay\u0131 sizin i\u00e7in otomatik yapar, ancak manuel olarak nas\u0131l yap\u0131laca\u011f\u0131n\u0131 bilmek esneklik sa\u011flar. Bir Nginx yap\u0131land\u0131rma dosyas\u0131 (\u00f6rne\u011fin <\/code><\/p>\n Bu yap\u0131land\u0131rma, Coolify, GitHub gibi bir Git deposuna ba\u011fland\u0131\u011f\u0131n\u0131zda, projenizi otomatik olarak derleyip da\u011f\u0131tabilen bir CI\/CD boru hatt\u0131 sa\u011flar. Bu, yeni bir kirac\u0131 ekledi\u011finizde veya mevcut bir kirac\u0131n\u0131n i\u00e7eri\u011fini g\u00fcncelledi\u011finizde (veritaban\u0131 veya CMS \u00fczerinde), Coolify'\u0131n otomatik olarak Next.js projenizi yeniden derlemesini ve yeni statik siteleri da\u011f\u0131tmas\u0131n\u0131 tetikleyece\u011fi anlam\u0131na gelir.<\/p>\n 1. Coolify Sunucunuzu Kurun:<\/strong> \u0130lk olarak, bir VPS'e (\u00f6rne\u011fin DigitalOcean, Hetzner) Coolify'\u0131 kurman\u0131z gerekir. Kurulum ad\u0131mlar\u0131 Coolify'\u0131n kendi dok\u00fcmantasyonunda detayl\u0131ca anlat\u0131lm\u0131\u015ft\u0131r.<\/p>\n 2. Git Deposu Entegrasyonu:<\/strong> Coolify kontrol paneline giri\u015f yap\u0131n. Yeni bir \"Application\" olu\u015fturun. \"Source\" olarak GitHub, GitLab veya kendi Git sunucunuzu se\u00e7in ve Next.js projenizin deposunu ba\u011flay\u0131n. Coolify, depoyu izleyecek ve her \"push\" i\u015fleminde veya belirli bir dalda de\u011fi\u015fiklik oldu\u011funda da\u011f\u0131t\u0131m\u0131 tetikleyecektir.<\/p>\n 3. Build ve Da\u011f\u0131t\u0131m Ayarlar\u0131:<\/strong><\/p>\n Coolify'\u0131n g\u00fcc\u00fc, t\u00fcm bu ad\u0131mlar\u0131 tek bir platformdan y\u00f6netmenize olanak sa\u011flamas\u0131d\u0131r. Yeni bir kirac\u0131 ekledi\u011finizde, sadece veri kayna\u011f\u0131n\u0131z\u0131 g\u00fcncellersiniz (\u00f6rne\u011fin \u00c7ok kirac\u0131l\u0131 statik site motorunuzu kurduktan sonra, onu daha da g\u00fc\u00e7lendirmek ve gelece\u011fe haz\u0131r hale getirmek i\u00e7in performans, \u00f6l\u00e7eklenebilirlik ve g\u00fcvenlik konular\u0131na odaklanmak hayati \u00f6nem ta\u015f\u0131r. Bu optimizasyonlar, hem kullan\u0131c\u0131 deneyimini art\u0131racak hem de sisteminizin daha uzun \u00f6m\u00fcrl\u00fc ve kararl\u0131 olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n \u015eimdiye kadar ele ald\u0131\u011f\u0131m\u0131z mimari, kula\u011fa teknik gelse de, ger\u00e7ek d\u00fcnyadaki pek \u00e7ok i\u015f problemini \u00e7\u00f6zmek i\u00e7in birebirdir. Bu b\u00f6l\u00fcmde, bahsetti\u011fimiz \"Next.js, Nginx ve Coolify ile \u00c7ok Kirac\u0131l\u0131 Statik Site Motoru\"nun hangi senaryolarda hayat kurtar\u0131c\u0131 olabilece\u011fine dair iki farkl\u0131 vaka analizini inceleyece\u011fiz.<\/p>\n Problem:<\/strong> \"Gelecek Dijital\" ad\u0131nda bir ajans, yerel esnaf ve k\u00fc\u00e7\u00fck i\u015fletmeler i\u00e7in uygun maliyetli web siteleri tasarlay\u0131p bar\u0131nd\u0131rma hizmeti sunmaktad\u0131r. Ajans, her yeni m\u00fc\u015fteri i\u00e7in s\u0131f\u0131rdan bir WordPress kurulumu yapmak veya ayr\u0131 hosting hesaplar\u0131 y\u00f6netmek zorunda kal\u0131yordu. Bu durum, her web sitesinin kurulumu, bak\u0131m\u0131 ve g\u00fcncellenmesi i\u00e7in \u00f6nemli bir zaman ve kaynak harcamas\u0131na neden oluyordu. Performans sorunlar\u0131, g\u00fcvenlik a\u00e7\u0131klar\u0131 ve y\u00fckselen bar\u0131nd\u0131rma maliyetleri de cabas\u0131yd\u0131. Ajans\u0131n b\u00fcy\u00fcme kapasitesi, operasyonel y\u00fck nedeniyle s\u0131n\u0131rlanm\u0131\u015ft\u0131.<\/p>\n \u00c7\u00f6z\u00fcm:<\/strong> Gelecek Dijital, \u00e7ok kirac\u0131l\u0131 statik site motoru mimarisine ge\u00e7meye karar verdi. Next.js ile temel web sitesi \u015fablonlar\u0131n\u0131 olu\u015fturdular. Her m\u00fc\u015fteri i\u00e7in (\u00f6rne\u011fin, Sonu\u00e7lar:<\/strong><\/p>\n Problem:<\/strong> Bir pazarlama otomasyonu SaaS'\u0131 olan \"LeadFlow\", m\u00fc\u015fterilerine \u00f6zel kampanyalar i\u00e7in ki\u015fiselle\u015ftirilmi\u015f a\u00e7\u0131l\u0131\u015f sayfalar\u0131 (landing pages) olu\u015fturma imkan\u0131 sunuyordu. Ancak mevcut sistemleri, her yeni a\u00e7\u0131l\u0131\u015f sayfas\u0131 i\u00e7in manuel ayarlamalar gerektiriyor, bu da m\u00fc\u015fterilerin yeni kampanya ba\u015flatma s\u00fcrelerini uzat\u0131yordu. Ayr\u0131ca, her a\u00e7\u0131l\u0131\u015f sayfas\u0131n\u0131n farkl\u0131 bir URL'e sahip olmas\u0131 ve h\u0131zl\u0131 y\u00fcklenmesi kritikti, ancak mevcut dinamik sayfa olu\u015fturma sistemi performans sorunlar\u0131 ya\u015f\u0131yordu.<\/p>\n \u00c7\u00f6z\u00fcm:<\/strong> LeadFlow, Next.js, Nginx ve Coolify \u00fc\u00e7l\u00fcs\u00fcn\u00fc kullanarak m\u00fc\u015fterilerine \u00f6zel, \u00e7ok kirac\u0131l\u0131 bir a\u00e7\u0131l\u0131\u015f sayfas\u0131 motoru geli\u015ftirdi. Her LeadFlow m\u00fc\u015fterisi, kendi kampanya y\u00f6neticisi panelinden a\u00e7\u0131l\u0131\u015f sayfas\u0131 i\u00e7eri\u011fini (metinler, g\u00f6rseller, CTA'lar) belirliyor ve bu veriler LeadFlow'un API'sine kaydediliyordu. Next.js uygulamas\u0131, bu API'den gelen verileri kullanarak derleme zaman\u0131nda her bir m\u00fc\u015fterinin her bir kampanyas\u0131 i\u00e7in benzersiz bir statik a\u00e7\u0131l\u0131\u015f sayfas\u0131 olu\u015fturuyordu (\u00f6rne\u011fin, Sonu\u00e7lar:<\/strong><\/p>\n Bu vaka analizleri, \u00e7ok kirac\u0131l\u0131 statik site motoru mimarisinin sadece teknik bir \u00e7\u00f6z\u00fcm olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda i\u015fletmelerin operasyonel verimlili\u011fini art\u0131ran ve rekabet avantaj\u0131 sa\u011flayan stratejik bir ara\u00e7 oldu\u011funu g\u00f6stermektedir. Bu yap\u0131, \u00f6zellikle \u00e7ok say\u0131da benzer yap\u0131da web varl\u0131\u011f\u0131 y\u00f6netmesi gereken senaryolar i\u00e7in idealdir.<\/p>\n Bu makale boyunca, Next.js, Nginx ve Coolify'\u0131 bir araya getirerek g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve y\u00f6netimi kolay bir \u00e7ok kirac\u0131l\u0131 statik site motoru mimarisini nas\u0131l kuraca\u011f\u0131m\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceledik. G\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, Next.js'in statik site olu\u015fturma yetenekleri, Nginx'in esnek y\u00f6nlendirme g\u00fcc\u00fc ve Coolify'\u0131n otomasyon kolayl\u0131\u011f\u0131 birle\u015fti\u011finde, geleneksel web sitesi y\u00f6netimiyle ilgili bir\u00e7ok zorlu\u011fun \u00fcstesinden gelinebilir. Bu mimari, \u00f6zellikle birden fazla web sitesi veya mikro site y\u00f6netmesi gereken dijital ajanslar, SaaS sa\u011flay\u0131c\u0131lar\u0131 veya b\u00fcy\u00fck kurumlar i\u00e7in ideal bir \u00e7\u00f6z\u00fcm sunar. Performans art\u0131\u015f\u0131, g\u00fcvenlik iyile\u015ftirmeleri ve operasyonel maliyetlerdeki d\u00fc\u015f\u00fc\u015f, bu yakla\u015f\u0131m\u0131n sundu\u011fu temel avantajlard\u0131r.<\/p>\n Statik sitelerin do\u011fas\u0131nda var olan h\u0131z ve g\u00fcvenlik avantajlar\u0131n\u0131, Next.js'in modern geli\u015ftirme deneyimiyle birle\u015ftirerek dinamik i\u00e7erik ihtiya\u00e7lar\u0131n\u0131za cevap verebilen bir yap\u0131 kurmu\u015f olduk. Nginx, subdomain bazl\u0131 y\u00f6nlendirmeleri ele alarak her kirac\u0131ya kendi \u00f6zel alan ad\u0131n\u0131 sunarken, Coolify ise t\u00fcm da\u011f\u0131t\u0131m, y\u00f6netim ve sertifika s\u00fcre\u00e7lerini otomatikle\u015ftirerek DevOps y\u00fck\u00fcn\u00fc omuzlar\u0131m\u0131zdan ald\u0131. Bu entegrasyon sayesinde, yeni kirac\u0131lar\u0131 eklemek veya mevcut siteleri g\u00fcncellemek, art\u0131k manuel ve hataya a\u00e7\u0131k s\u00fcre\u00e7ler olmaktan \u00e7\u0131k\u0131p, h\u0131zl\u0131 ve otomatik bir boru hatt\u0131na d\u00f6n\u00fc\u015f\u00fcyor. Gelecekte bu mimari, sunucusuz fonksiyonlar (serverless functions) ile daha da geni\u015fletilerek, statik sitelerin dinamik ihtiya\u00e7lar\u0131n\u0131 daha da fazla kar\u015f\u0131layabilir ve daha karma\u015f\u0131k etkile\u015fimler i\u00e7in esneklik sa\u011flayabilir. Bu sayede, gelece\u011fin web uygulamalar\u0131 i\u00e7in sa\u011flam bir temel olu\u015fturulmu\u015f olur.<\/p>\n 1. Bu mimari ne t\u00fcr projeler i\u00e7in idealdir?<\/strong> 2. Veri taban\u0131 y\u00f6netimi nas\u0131l yap\u0131l\u0131r?<\/strong> 3. Yeni bir kirac\u0131 eklemek ne kadar s\u00fcrer?<\/strong> 4. SEO performans\u0131 nas\u0131l etkilenir?<\/strong> <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Pek \u00e7ok i\u015fletmenin veya ajans\u0131n kar\u015f\u0131la\u015ft\u0131\u011f\u0131 ortak bir sorun var: M\u00fc\u015fterileri i\u00e7in onlarca, hatta y\u00fczlerce web sitesini y\u00f6netmek.…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1504],"tags":[],"class_list":{"0":"post-36316","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-nginx","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\ngetStaticProps<\/code> ve getStaticPaths<\/code> gibi fonksiyonlar\u0131, derleme zaman\u0131nda dinamik veri \u00e7ekme ve URL yollar\u0131 olu\u015fturma esnekli\u011fi sunarak, \u00e7ok kirac\u0131l\u0131 yap\u0131m\u0131z i\u00e7in kritik bir temel olu\u015fturur. Bu sayede, farkl\u0131 kirac\u0131lar i\u00e7in farkl\u0131 i\u00e7erikleri kolayca statik olarak olu\u015fturabiliriz. \u00d6rne\u011fin, her kirac\u0131 i\u00e7in \u00f6zelle\u015ftirilmi\u015f verileri bir API’den \u00e7ekip, o kirac\u0131ya \u00f6zel sayfalar \u00fcretebiliriz.<\/p>\nNginx: Y\u00fcksek Performansl\u0131 Y\u00f6nlendirici Olarak Rol\u00fc<\/h3>\n
musteri1.sitemotoru.com<\/code> ve musteri2.sitemotoru.com<\/code> adreslerine gelen istekleri alg\u0131layabilir ve her bir subdomain i\u00e7in \u00f6nceden olu\u015fturulmu\u015f Next.js statik site dosyalar\u0131n\u0131 sunabilir. Ayr\u0131ca, SSL sertifikalar\u0131n\u0131 y\u00f6netme (Let’s Encrypt gibi ara\u00e7larla kolay entegrasyon), HTTP\/2 deste\u011fi ve geli\u015fmi\u015f \u00f6nbellekleme mekanizmalar\u0131 gibi \u00f6zellikleriyle projemizin g\u00fcvenlik ve performans\u0131n\u0131 art\u0131racakt\u0131r. Nginx, gelen trafi\u011fi do\u011fru kirac\u0131ya y\u00f6nlendirerek, tek bir Next.js uygulamas\u0131n\u0131n birden fazla kirac\u0131ya hizmet vermesini sa\u011flayacak hayati bir k\u00f6pr\u00fc g\u00f6revi g\u00f6recektir. Bu, her kirac\u0131 i\u00e7in ayr\u0131 bir sunucu \u00e7al\u0131\u015ft\u0131rma maliyetinden bizi kurtar\u0131r ve y\u00f6netimi basitle\u015ftirir.<\/p>\nCoolify: Modern DevOps’u Basitle\u015ftiren Hepsi Bir Arada Platform<\/h3>\n
\u00c7ok Kirac\u0131l\u0131 Mimariyi Tasarlamak: Temel Yakla\u015f\u0131mlar Nelerdir?<\/h2>\n
Subdomain Bazl\u0131 Kirac\u0131l\u0131k Modeli: Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n
musteri-a.ajansim.com<\/code>, m\u00fc\u015fteri B i\u00e7in musteri-b.ajansim.com<\/code> adreslerini kullanabilir. Bu model, birka\u00e7 \u00f6nemli avantaj sunar. \u00d6ncelikle, her kirac\u0131n\u0131n URL yap\u0131s\u0131 net ve belirgindir, bu da marka kimli\u011fini g\u00fc\u00e7lendirir ve kullan\u0131c\u0131lar i\u00e7in anla\u015f\u0131l\u0131rl\u0131\u011f\u0131 art\u0131r\u0131r. \u0130kincisi, teknik a\u00e7\u0131dan y\u00f6netimi nispeten daha basittir \u00e7\u00fcnk\u00fc Nginx gibi bir ters proxy, gelen istekleri kolayca subdomain’e g\u00f6re y\u00f6nlendirebilir.<\/p>\nmusteri-a.ajansim.com<\/code> adresine gelen bir istek, Nginx taraf\u0131ndan yakalan\u0131r ve Next.js’in derlenmi\u015f \u00e7\u0131kt\u0131s\u0131na y\u00f6nlendirilir. Next.js uygulamas\u0131 ise bu subdomain bilgisini kullanarak (e\u011fer URL yap\u0131s\u0131na entegre edilmi\u015fse), “musteri-a”ya ait i\u00e7eri\u011fi dinamik olarak y\u00fckleyip sunar. Bu, her kirac\u0131 i\u00e7in ayr\u0131 bir da\u011f\u0131t\u0131m veya ayr\u0131 bir Next.js projesi tutma zorunlulu\u011funu ortadan kald\u0131r\u0131r, bu da kaynak y\u00f6netimini ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini inan\u0131lmaz derecede basitle\u015ftirir. Elbette, bu yap\u0131 i\u00e7in wildcard DNS kayd\u0131na ihtiyac\u0131n\u0131z olacakt\u0131r (\u00f6rne\u011fin, *.ajansim.com<\/code> gibi bir A kayd\u0131 veya CNAME kayd\u0131). Bu sayede, olu\u015fturulan her yeni subdomain otomatik olarak ana sunucunuza y\u00f6nlendirilir.<\/p>\nNext.js Taraf\u0131nda Veri ve \u0130\u00e7erik Y\u00f6netimi<\/h3>\n
getStaticPaths<\/code> ve getStaticProps<\/code> fonksiyonlar\u0131 ile etkili bir \u015fekilde yapabiliriz. Bu fonksiyonlar, derleme zaman\u0131nda \u00e7al\u0131\u015f\u0131r ve bizim i\u00e7in statik dosyalar\u0131 olu\u015fturur.<\/p>\ngetStaticPaths<\/code>, Next.js’e hangi dinamik yollar\u0131n derleme zaman\u0131nda statik olarak \u00f6nceden olu\u015fturulaca\u011f\u0131n\u0131 bildirir. Bizim durumumuzda, bu fonksiyon, sisteme kay\u0131tl\u0131 t\u00fcm kirac\u0131lar\u0131n slug (URL dostu isim) listesini d\u00f6nd\u00fcrecektir. \u00d6rne\u011fin, bir API’den veya bir JSON dosyas\u0131ndan t\u00fcm kirac\u0131lar\u0131n listesini \u00e7ekebilir ve her biri i\u00e7in bir yol olu\u015fturabiliriz.<\/p>\n\nexport async function getStaticPaths() {\n \/\/ Veritaban\u0131ndan veya bir CMS'ten t\u00fcm kirac\u0131 sluglar\u0131n\u0131 \u00e7ekin\n const tenants = await fetch('https:\/\/api.yourdomain.com\/tenants').then(res => res.json());\n\n const paths = tenants.map((tenant) => ({\n params: { tenantSlug: tenant.slug },\n }));\n\n return { paths, fallback: false }; \/\/ fallback: false yeni kirac\u0131lar i\u00e7in 404 d\u00f6nd\u00fcr\u00fcr, true ise an\u0131nda olu\u015fturur\n}\n<\/pre>\n\/nextjs-output\/[tenantSlug]<\/code> gibi statik URL'ler olu\u015fturulmas\u0131n\u0131 sa\u011flar. E\u011fer yeni bir kirac\u0131 eklenirse, projenin yeniden derlenmesi gerekecektir (veya fallback: 'blocking'<\/code> kullan\u0131larak ilk istekte olu\u015fturulabilir).<\/p>\ngetStaticProps<\/code>, belirli bir kirac\u0131 slug'\u0131na ait t\u00fcm veriyi derleme zaman\u0131nda \u00e7eker. Bu veriler, kirac\u0131n\u0131n temas\u0131n\u0131, logosunu, sayfa i\u00e7eriklerini veya herhangi ba\u015fka \u00f6zelle\u015ftirilmi\u015f bilgiyi i\u00e7erebilir. Bu fonksiyon, Next.js sayfas\u0131n\u0131n props'u olarak bu verileri d\u00f6nd\u00fcr\u00fcr ve sayfa bu verilerle statik olarak derlenir.<\/p>\n\nexport async function getStaticProps({ params }) {\n const { tenantSlug } = params;\n\n \/\/ tenantSlug'a g\u00f6re kirac\u0131 verilerini \u00e7ekin\n const tenantData = await fetch(https:\/\/api.yourdomain.com\/tenants\/${tenantSlug}<\/code>).then(res => res.json());\n\n \/\/ Kirac\u0131ya ait sayfa i\u00e7eriklerini veya temay\u0131 da \u00e7ekebilirsiniz\n const pageContent = await fetch(https:\/\/api.yourdomain.com\/pages\/${tenantSlug}\/home<\/code>).then(res => res.json());\n\n if (!tenantData) {\n return {\n notFound: true,\n };\n }\n\n return {\n props: {\n tenantData,\n pageContent,\n },\n revalidate: 60, \/\/ Saniyede bir i\u00e7eri\u011fi kontrol et ve yeniden olu\u015ftur (iste\u011fe ba\u011fl\u0131)\n };\n}\n<\/pre>\ntenantData<\/code> ve pageContent<\/code> props'lar\u0131n\u0131 alarak ilgili kirac\u0131n\u0131n i\u00e7eri\u011fini g\u00f6sterebilir. Bu yap\u0131, merkezi bir veri kayna\u011f\u0131n\u0131 (\u00f6rne\u011fin bir headless CMS, veritaban\u0131 veya API) kullanarak binlerce kirac\u0131n\u0131n i\u00e7eri\u011fini tek bir Next.js projesi alt\u0131nda y\u00f6netmemizi sa\u011flar. \u0130\u00e7erik g\u00fcncellemeleri, veri kayna\u011f\u0131nda yap\u0131ld\u0131\u011f\u0131nda ve proje yeniden derlendi\u011finde (Coolify arac\u0131l\u0131\u011f\u0131yla otomatik olarak), t\u00fcm statik siteler g\u00fcncellenmi\u015f i\u00e7eri\u011fi yans\u0131t\u0131r hale gelir.<\/p>\nAd\u0131m Ad\u0131m Kurulum ve Yap\u0131land\u0131rma: Uygulamal\u0131 Rehber<\/h2>\n
Next.js Projesi Olu\u015fturma ve Kirac\u0131 Verilerini Entegre Etme<\/h3>\n
\nnpx create-next-app multi-tenant-engine --ts --eslint --app\ncd multi-tenant-engine\n<\/pre>\ndata\/tenants.json<\/code> ad\u0131nda bir dosya olu\u015fturun:<\/p>\n\n[\n {\n \"id\": \"1\",\n \"slug\": \"kiraci1\",\n \"name\": \"Kirac\u0131 1 Kurumsal Site\",\n \"theme\": {\n \"primaryColor\": \"#0070f3\",\n \"secondaryColor\": \"#1a1a1a\"\n },\n \"content\": {\n \"heroTitle\": \"Kirac\u0131 1'e Ho\u015f Geldiniz!\",\n \"heroDescription\": \"\u0130\u015fletmenizin dijital varl\u0131\u011f\u0131n\u0131 g\u00fc\u00e7lendiriyoruz.\"\n }\n },\n {\n \"id\": \"2\",\n \"slug\": \"kiraci2\",\n \"name\": \"Kirac\u0131 2 E-ticaret Sitesi\",\n \"theme\": {\n \"primaryColor\": \"#ff0070\",\n \"secondaryColor\": \"#f0f0f0\"\n },\n \"content\": {\n \"heroTitle\": \"Kirac\u0131 2 \u00d6zel \u00dcr\u00fcnleri Ke\u015ffedin!\",\n \"heroDescription\": \"En yeni ve en trend \u00fcr\u00fcnler burada.\"\n }\n }\n]\n<\/pre>\napp\/[tenantSlug]\/page.tsx<\/code> dosyas\u0131n\u0131 olu\u015fturun:<\/p>\n\nimport { notFound } from 'next\/navigation';\nimport tenantsData from '@\/data\/tenants.json';\n\n\/\/ Bu fonksiyon, Next.js'e hangi yollar\u0131n derleme zaman\u0131nda olu\u015fturulaca\u011f\u0131n\u0131 s\u00f6yler\nexport async function generateStaticParams() {\n return tenantsData.map((tenant) => ({\n tenantSlug: tenant.slug,\n }));\n}\n\n\/\/ Bu Next.js sayfa bile\u015feni, her kirac\u0131ya \u00f6zel i\u00e7eri\u011fi g\u00f6sterecek\ninterface TenantPageProps {\n params: {\n tenantSlug: string;\n };\n}\n\nexport default function TenantPage({ params }: TenantPageProps) {\n const { tenantSlug } = params;\n\n \/\/ tenantSlug'a g\u00f6re ilgili kirac\u0131n\u0131n verilerini bul\n const tenant = tenantsData.find((t) => t.slug === tenantSlug);\n\n if (!tenant) {\n notFound(); \/\/ Kirac\u0131 bulunamazsa 404 sayfas\u0131na y\u00f6nlendir\n }\n\n \/\/ Kirac\u0131ya \u00f6zel renkleri CSS de\u011fi\u015fkenleri olarak ayarla\n const style = {\n '--primary-color': tenant.theme.primaryColor,\n '--secondary-color': tenant.theme.secondaryColor,\n } as React.CSSProperties; \/\/ TypeScript i\u00e7in tip zorlamas\u0131\n\n return (\n \n {tenant.content.heroTitle}\n <\/h1>\n
npm run build<\/code> komutu \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda kiraci1<\/code> ve kiraci2<\/code> i\u00e7in statik HTML sayfalar\u0131 olu\u015fturacakt\u0131r. \u00d6rnekte basit bir CSS kullan\u0131m\u0131 i\u00e7in inline style kulland\u0131m, ger\u00e7ek projede Tailwind CSS veya CSS mod\u00fclleri gibi bir \u00e7\u00f6z\u00fcm tercih edilebilir. global.css<\/code> dosyan\u0131za da basit bir varsay\u0131lan renk tan\u0131m\u0131 ekleyebilirsiniz.<\/p>\nNginx ile Dinamik Subdomain Y\u00f6nlendirmesi Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n
\/etc\/nginx\/sites-available\/multi-tenant.conf<\/code>) a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnebilir:<\/p>\n\nserver {\n listen 80;\n listen [::]:80;\n server_name *.yourdomain.com; # Wildcard subdomain dinle\n\n # T\u00fcm HTTP isteklerini HTTPS'ye y\u00f6nlendir\n return 301 https:\/\/$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n server_name *.yourdomain.com; # Wildcard subdomain dinle\n\n # SSL sertifikalar\u0131 (Let's Encrypt ile otomatik al\u0131nabilir veya manuel ayarlanabilir)\n ssl_certificate \/etc\/letsencrypt\/live\/yourdomain.com\/fullchain.pem;\n ssl_certificate_key \/etc\/letsencrypt\/live\/yourdomain.com\/privkey.pem;\n ssl_trusted_certificate \/etc\/letsencrypt\/live\/yourdomain.com\/chain.pem;\n include \/etc\/letsencrypt\/options-ssl-nginx.conf;\n ssl_dhparam \/etc\/letsencrypt\/ssl-dhparams.pem;\n\n root \/var\/www\/multi-tenant-engine\/.next\/static; # Next.js statik dosyalar\u0131n\u0131n konumu\n\n index index.html index.htm;\n\n location \/_next\/static {\n # Next.js statik varl\u0131klar\u0131n\u0131 do\u011frudan servis et\n alias \/var\/www\/multi-tenant-engine\/.next\/static;\n expires 1y;\n access_log off;\n log_not_found off;\n }\n\n location \/ {\n # E\u011fer bir statik dosya bulunamazsa, Next.js'in statik HTML'ini sun\n # Next.js'in derledi\u011fi sayfalar i\u00e7in do\u011fru dosyay\u0131 bulmas\u0131 gerekiyor\n try_files $uri $uri\/ \/$host$uri.html \/$host\/$uri \/index.html =404;\n\n # Bu k\u0131s\u0131m, Coolify'\u0131n Nginx\/Caddy'yi nas\u0131l yap\u0131land\u0131rd\u0131\u011f\u0131na g\u00f6re de\u011fi\u015febilir.\n # Genellikle Coolify, uygulaman\u0131n \u00e7\u0131kt\u0131s\u0131n\u0131 do\u011frudan bir dizine yerle\u015ftirir ve o dizini root olarak ayarlar.\n # E\u011fer Next.js output'u .next\/static i\u00e7indeyse, yukar\u0131daki root ve try_files yeterli olabilir.\n # E\u011fer dinamik bir server-side logic olsayd\u0131 (SSG de\u011fil de SSR), reverse proxy kullan\u0131l\u0131rd\u0131.\n # Ancak SSG'de, Next.js build \u00e7\u0131kt\u0131s\u0131 (HTML, CSS, JS) do\u011frudan servis edilir.\n\n # Kirac\u0131 slug'\u0131n\u0131 URL'den ay\u0131klamak i\u00e7in karma\u015f\u0131k bir Nginx yeniden yazma kural\u0131 gerekebilir,\n # ancak Next.js'in App Router yap\u0131s\u0131 (app\/[tenantSlug]\/page.tsx) bunu zaten i\u00e7eriyor.\n # Yani Nginx'in tek yapmas\u0131 gereken, wildcard subdomain'i yakalay\u0131p Next.js'in statik \u00e7\u0131kt\u0131 dizinine\n # istekleri y\u00f6nlendirmek ve Next.js'in kendi routing mant\u0131\u011f\u0131n\u0131 kullanmas\u0131na izin vermektir.\n # Coolify bu k\u0131sm\u0131 \u00e7ok basitle\u015ftirir.\n }\n\n error_page 404 \/404.html; # \u00d6zel 404 sayfas\u0131\n}\n<\/pre>\n*.yourdomain.com<\/code> gelen t\u00fcm HTTP isteklerini HTTPS'ye y\u00f6nlendirecek ve ard\u0131ndan HTTPS isteklerini Next.js'in derlenmi\u015f statik dosyalar\u0131n\u0131n bulundu\u011fu \/var\/www\/multi-tenant-engine\/.next\/static<\/code> dizinine y\u00f6nlendirecektir. try_files<\/code> y\u00f6nergesi, gelen URL'ye g\u00f6re ilgili statik dosyay\u0131 bulmaya \u00e7al\u0131\u015f\u0131r. Bu Nginx ayar\u0131, Next.js'in output: 'standalone'<\/code> veya output: 'export'<\/code> moduyla olu\u015fturulmu\u015f statik \u00e7\u0131kt\u0131s\u0131 i\u00e7in uygundur. Coolify kulland\u0131\u011f\u0131n\u0131zda bu karma\u015f\u0131k Nginx yap\u0131land\u0131rmalar\u0131n\u0131 elle yapman\u0131za gerek kalmad\u0131\u011f\u0131n\u0131 unutmamak \u00f6nemlidir.<\/p>\nCoolify \u00dczerinde Otomatik Da\u011f\u0131t\u0131m ve Y\u00f6netim<\/h3>\n
\n
npm install<\/code> ve npm run build<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131racakt\u0131r.<\/li>\nnpm install<\/code>, npm run build<\/code>).<\/li>\n.next\/static<\/code> veya out<\/code> (e\u011fer next export<\/code> kullan\u0131l\u0131yorsa) olacakt\u0131r. App Router ile .next\/static<\/code> i\u00e7indeki HTML dosyalar\u0131 root'tan servis edilebilir.<\/li>\nyourdomain.com<\/code>) ve wildcard subdomain'i (*.yourdomain.com<\/code>) ekleyin. Coolify, bu subdomainler i\u00e7in otomatik olarak Nginx\/Caddy yap\u0131land\u0131rmas\u0131n\u0131 ve SSL sertifikalar\u0131n\u0131 (Let's Encrypt ile) y\u00f6netecektir. Bu, Nginx'i manuel olarak yap\u0131land\u0131rma ihtiyac\u0131n\u0131z\u0131 ortadan kald\u0131r\u0131r.<\/li>\n<\/ul>\ntenants.json<\/code> dosyas\u0131n\u0131 veya Headless CMS'inizi). Git deponuza yapt\u0131\u011f\u0131n\u0131z bu de\u011fi\u015fiklikleri push etti\u011finizde, Coolify otomatik olarak yeni build'i tetikleyecek, Next.js t\u00fcm statik sayfalar\u0131 (yeni kirac\u0131 da dahil) yeniden olu\u015fturacak ve Coolify bu yeni statik \u00e7\u0131kt\u0131y\u0131 sunucular\u0131n\u0131za da\u011f\u0131tacakt\u0131r. Bu, s\u0131f\u0131r kesinti s\u00fcresiyle (zero-downtime) s\u00fcrekli ve otomatik bir da\u011f\u0131t\u0131m s\u00fcreci sa\u011flar.<\/p>\nPerformans, \u00d6l\u00e7eklenebilirlik ve G\u00fcvenlik \u0130pu\u00e7lar\u0131<\/h2>\n
Performans \u0130pu\u00e7lar\u0131<\/h3>\n
\n
Image<\/code> bile\u015fenini kullanarak g\u00f6rselleri otomatik olarak optimize edin. Bu bile\u015fen, g\u00f6rselleri modern formatlara (WebP gibi) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr, farkl\u0131 cihaz boyutlar\u0131 i\u00e7in responsive versiyonlar\u0131n\u0131 olu\u015fturur ve lazy-loading (tembel y\u00fckleme) uygulayarak sayfa h\u0131z\u0131n\u0131 art\u0131r\u0131r.<\/li>\nCache-Control<\/code>, Expires<\/code>) arac\u0131l\u0131\u011f\u0131yla taray\u0131c\u0131 \u00f6nbelleklemesini etkinle\u015ftirin. \u00d6zellikle de\u011fi\u015fmeyen statik varl\u0131klar (CSS, JS, fontlar) i\u00e7in uzun \u00f6m\u00fcrl\u00fc \u00f6nbellekleme s\u00fcreleri belirleyin. Bu, tekrar ziyaret eden kullan\u0131c\u0131lar i\u00e7in sitenin an\u0131nda y\u00fcklenmesini sa\u011flar.<\/li>\n\u00d6l\u00e7eklenebilirlik Stratejileri<\/h3>\n
\n
G\u00fcvenlik \u00d6nlemleri<\/h3>\n
\n
getStaticProps<\/code> i\u00e7inde veri \u00e7ekerken, yaln\u0131zca ilgili tenantSlug<\/code>'a ait verileri sorgulad\u0131\u011f\u0131n\u0131zdan emin olun. Bu, kritik bir g\u00fcvenlik ve veri mahremiyeti ad\u0131m\u0131d\u0131r.\n<\/div>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizi<\/h2>\n
Vaka Analizi 1: K\u00fc\u00e7\u00fck \u0130\u015fletmeler \u0130\u00e7in Web Sitesi Sa\u011flayan Dijital Ajans<\/h3>\n
firin.gelecekdijital.com<\/code>, cicekci.gelecekdijital.com<\/code> gibi) subdomain'ler \u00fczerinden eri\u015filebilen statik siteler haz\u0131rlad\u0131lar. M\u00fc\u015fteri verileri (ileti\u015fim bilgileri, hizmetler, galeriler vb.) merkezi bir Headless CMS'te tutuldu. Coolify, Next.js projesinin otomatik da\u011f\u0131t\u0131m\u0131n\u0131 \u00fcstlendi. Ajans, her yeni m\u00fc\u015fteri i\u00e7in sadece Headless CMS'e yeni bir kay\u0131t ekliyor ve Git deposuna k\u00fc\u00e7\u00fck bir g\u00fcncelleme (\u00f6rne\u011fin, tenant.json<\/code> dosyas\u0131ndaki bir giri\u015f) push ediyordu. Coolify bu de\u011fi\u015fikli\u011fi alg\u0131lay\u0131p, projenin yeniden derlenmesini ve yeni m\u00fc\u015fterinin statik sitesinin otomatik olarak yay\u0131na al\u0131nmas\u0131n\u0131 sa\u011fl\u0131yordu.<\/p>\n\n
Vaka Analizi 2: SaaS Platformu \u0130\u00e7in Ki\u015fiselle\u015ftirilmi\u015f A\u00e7\u0131l\u0131\u015f Sayfalar\u0131<\/h3>\n
kampanya1.musteri.leadflow.com<\/code>). Coolify, bu Next.js projesinin s\u00fcrekli da\u011f\u0131t\u0131m\u0131n\u0131 y\u00f6netiyordu. M\u00fc\u015fteri, panelinden bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131nda, bir webhook Coolify'\u0131 tetikliyor ve ilgili a\u00e7\u0131l\u0131\u015f sayfas\u0131 yeniden derlenip an\u0131nda g\u00fcncelleniyordu.<\/p>\n\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\n Bu mimari, \u00f6zellikle \u00e7ok say\u0131da benzer yap\u0131da (\u00f6rne\u011fin, ayn\u0131 temel \u015fablonu kullanan ama i\u00e7erikleri farkl\u0131 olan) web sitesi veya mikro site y\u00f6netmesi gereken projeler i\u00e7in idealdir. Dijital ajanslar, yerel i\u015fletmeler i\u00e7in web sitesi sa\u011flayan SaaS \u015firketleri, e-ticaret siteleri i\u00e7in ki\u015fiselle\u015ftirilmi\u015f a\u00e7\u0131l\u0131\u015f sayfalar\u0131 sunan pazarlama platformlar\u0131 veya kurum i\u00e7i departman siteleri gibi senaryolar bu yap\u0131dan b\u00fcy\u00fck fayda sa\u011flayabilir.<\/p>\n
\n Statik siteler do\u011frudan bir veritaban\u0131na ba\u011flanmaz. Kirac\u0131ya \u00f6zel veriler (i\u00e7erikler, ayarlar vb.) derleme zaman\u0131nda (Next.js'in getStaticProps<\/code> fonksiyonu arac\u0131l\u0131\u011f\u0131yla) bir API, Headless CMS (\u00f6rne\u011fin Contentful, Strapi, Sanity), JSON dosyalar\u0131 veya ba\u015fka bir merkezi veri kayna\u011f\u0131ndan \u00e7ekilir. Bu veri kaynaklar\u0131 ayr\u0131 bir sunucu veya servis \u00fczerinde bar\u0131nd\u0131r\u0131l\u0131r ve kendi veritaban\u0131 y\u00f6netimlerini kullan\u0131r.<\/p>\n
\n Yeni bir kirac\u0131 eklemek, veri kayna\u011f\u0131n\u0131za (Headless CMS veya API) yeni kirac\u0131 bilgilerini eklemek ve ard\u0131ndan Next.js projesinin yeniden derlenmesini tetiklemekle m\u00fcmk\u00fcnd\u00fcr. Coolify'\u0131n otomatik da\u011f\u0131t\u0131m boru hatt\u0131 sayesinde, bu i\u015flem veri giri\u015fi sonras\u0131 birka\u00e7 dakika i\u00e7inde tamamlanabilir ve yeni kirac\u0131n\u0131n statik sitesi otomatik olarak yay\u0131na al\u0131n\u0131r.<\/p>\n
\n Bu mimari, SEO performans\u0131 a\u00e7\u0131s\u0131ndan olduk\u00e7a avantajl\u0131d\u0131r. Statik siteler, \u00e7ok h\u0131zl\u0131 y\u00fcklenir, bu da Google'\u0131n s\u0131ralama fakt\u00f6rlerinden biri olan sayfa h\u0131z\u0131 metriklerini (Core Web Vitals) iyile\u015ftirir. Her kirac\u0131n\u0131n kendine ait ayr\u0131 bir subdomain'de olmas\u0131, arama motorlar\u0131n\u0131n her siteyi ayr\u0131 bir varl\u0131k olarak indekslemesine olanak tan\u0131r. Next.js'in sundu\u011fu meta etiket y\u00f6netimi ve semantik HTML yap\u0131s\u0131 da SEO'yu destekler. Do\u011fru bir i\u00e7erik stratejisi ve d\u00fczenli g\u00fcncellemelerle y\u00fcksek SEO performans\u0131 elde edilebilir.<\/p>\n