{"id":34608,"date":"2025-11-19T18:30:54","date_gmt":"2025-11-19T15:30:54","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/"},"modified":"2025-11-19T18:30:54","modified_gmt":"2025-11-19T15:30:54","slug":"umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/","title":{"rendered":"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz"},"content":{"rendered":"<p><body><\/p>\n<p>Umami&#8217;nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!<\/p>\n<p>Modern web uygulamas\u0131 geli\u015ftirmenin en temel ta\u015flar\u0131ndan biri, \u015f\u00fcphesiz ki sa\u011flam ve iyi d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f bir proje yap\u0131s\u0131d\u0131r. \u00d6zellikle a\u00e7\u0131k kaynakl\u0131 projelerde, geli\u015ftiricilerin kolayca anlayabilece\u011fi, katk\u0131da bulunabilece\u011fi ve s\u00fcrd\u00fcrebilece\u011fi bir yap\u0131 hayati \u00f6nem ta\u015f\u0131r. \u0130\u015fte tam da bu noktada, gizlilik odakl\u0131, a\u00e7\u0131k kaynakl\u0131 ve kullan\u0131m\u0131 kolay bir web analitik arac\u0131 olan Umami&#8217;nin kod taban\u0131n\u0131n incelenmesi olduk\u00e7a de\u011ferli hale geliyor. D\u00fczensiz bir yap\u0131, yeni \u00f6zelliklerin eklenmesini zorla\u015ft\u0131rabilir, hata ay\u0131klama s\u00fcre\u00e7lerini uzatabilir ve performans sorunlar\u0131na yol a\u00e7abilir. Bununla birlikte, iyi organize edilmi\u015f bir proje, geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r, i\u015fbirli\u011fini te\u015fvik eder ve uygulaman\u0131n uzun vadeli s\u00fcrd\u00fcr\u00fclebilirli\u011fini garantiler.<\/p>\n<p>Umami, Next.js, React ve Node.js gibi modern teknolojileri kullanarak olu\u015fturulmu\u015f bir projedir. Bu teknolojilerin sundu\u011fu imkanlar, Umami&#8217;nin esnek, h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir bir yap\u0131ya sahip olmas\u0131n\u0131 sa\u011flam\u0131\u015ft\u0131r. Peki, bu teknolojiler Umami kod taban\u0131nda nas\u0131l bir araya getirildi? Hangi dizinler hangi ama\u00e7la kullan\u0131l\u0131yor ve neden bu \u015fekilde organize edilmi\u015fler? Bu sorular\u0131n yan\u0131tlar\u0131n\u0131 anlamak, yaln\u0131zca Umami&#8217;yi daha iyi kullanman\u0131z\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda kendi projelerinizde de uygulayabilece\u011finiz de\u011ferli tasar\u0131m desenleri ve en iyi uygulamalar hakk\u0131nda fikir edinmenize yard\u0131mc\u0131 olur. Ayr\u0131ca, Umami&#8217;nin arkas\u0131ndaki felsefe olan &#8220;basitlik ve gizlilik&#8221;, projenin mimarisine de yans\u0131m\u0131\u015f durumdad\u0131r. Bu, gereksiz karma\u015f\u0131kl\u0131ktan ka\u00e7\u0131narak, temel i\u015flevselli\u011fe odaklanan temiz bir yap\u0131 anlam\u0131na gelir. Dolay\u0131s\u0131yla, Umami&#8217;nin kod taban\u0131n\u0131 analiz etmek, sadece teknik bir inceleme de\u011fil, ayn\u0131 zamanda modern web geli\u015ftirme prensiplerinin pratik bir uygulamas\u0131n\u0131 g\u00f6rmek demektir. Umami gibi b\u00fcy\u00fcyen bir a\u00e7\u0131k kaynak projesinde, toplulu\u011fun katk\u0131lar\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Net bir yap\u0131, yeni kat\u0131l\u0131mc\u0131lar\u0131n projeye adaptasyon s\u00fcrecini h\u0131zland\u0131r\u0131r ve kaliteli katk\u0131lar\u0131n \u00f6n\u00fcn\u00fc a\u00e7ar. Bu da Umami&#8217;nin s\u00fcrekli geli\u015fimi ve yenilenmesi i\u00e7in kritik bir fakt\u00f6rd\u00fcr.<\/p>\n<h2>Umami&#8217;nin Temel Mimarisi: Hangi Katmanlar Bir Arada \u00c7al\u0131\u015f\u0131r?<\/h2>\n<p>Umami, modern web uygulamas\u0131 mimarisinin en iyi \u00f6rneklerinden birini sunar; g\u00fc\u00e7l\u00fc bir istemci taraf\u0131 deneyimi ile sa\u011flam bir sunucu taraf\u0131 altyap\u0131s\u0131n\u0131 birle\u015ftirir. Bu mimari, uygulaman\u0131n hem performans\u0131n\u0131 hem de \u00f6l\u00e7eklenebilirli\u011fini art\u0131rmak i\u00e7in \u00f6zenle tasarlanm\u0131\u015ft\u0131r. Temelde, Umami&#8217;nin mimarisi \u00fc\u00e7 ana katmana ayr\u0131labilir: Sunum Katman\u0131 (Client-side), Uygulama Katman\u0131 (Server-side\/API) ve Veri Katman\u0131 (Database). Bu katmanlar, her biri kendi \u00f6zel g\u00f6revlerini yerine getirerek bir b\u00fct\u00fcn olarak sorunsuz bir \u015fekilde \u00e7al\u0131\u015f\u0131r.<\/p>\n<p>Sunum Katman\u0131, kullan\u0131c\u0131lar\u0131n Umami panosuyla etkile\u015fimde bulundu\u011fu aray\u00fcz\u00fc ifade eder. Bu katman, pop\u00fcler bir React \u00e7at\u0131s\u0131 olan Next.js \u00fczerine in\u015fa edilmi\u015ftir. Next.js, hem sunucu taraf\u0131 render (SSR) hem de statik site \u00fcretimi (SSG) gibi g\u00fc\u00e7l\u00fc renderlama yetenekleri sunarak, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve geli\u015fmi\u015f SEO performans\u0131 sa\u011flar. React bile\u015fenleri sayesinde, Umami&#8217;nin kullan\u0131c\u0131 aray\u00fcz\u00fc mod\u00fcler, yeniden kullan\u0131labilir ve bak\u0131m\u0131 kolay bir yap\u0131ya sahiptir. Kullan\u0131c\u0131 etkile\u015fimleri, dinamik grafikler ve raporlar bu katmanda i\u015flenir ve g\u00f6sterilir. Ayr\u0131ca, bu katman, kullan\u0131c\u0131 verilerini (ziyaretler, etkinlikler vb.) toplamak i\u00e7in hafif bir izleme beti\u011fi i\u00e7erir ve bu betik, toplanan verileri arka u\u00e7 API&#8217;sine g\u00fcvenli bir \u015fekilde g\u00f6nderir.<\/p>\n<p>Uygulama Katman\u0131, Umami&#8217;nin temel i\u015f mant\u0131\u011f\u0131n\u0131 ve veri i\u015fleme s\u00fcre\u00e7lerini bar\u0131nd\u0131r\u0131r. Bu katman, Node.js \u00fczerinde \u00e7al\u0131\u015f\u0131r ve veri toplama, i\u015fleme, do\u011frulama ve veri taban\u0131na yazma gibi g\u00f6revleri \u00fcstlenir. Next.js&#8217;in API Y\u00f6nlendirme (API Routes) \u00f6zelli\u011fi, bu katman\u0131n olu\u015fturulmas\u0131nda kilit bir rol oynar. Her bir API u\u00e7 noktas\u0131, belirli bir i\u015flemi ger\u00e7ekle\u015ftirmek \u00fczere tasarlanm\u0131\u015ft\u0131r; \u00f6rne\u011fin, yeni bir ziyaret\u00e7iyi kaydetmek veya belirli bir site i\u00e7in analitik verileri \u00e7ekmek. Bu katman, ayn\u0131 zamanda kimlik do\u011frulama, yetkilendirme ve potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131na kar\u015f\u0131 koruma gibi kritik g\u00fcvenlik mekanizmalar\u0131n\u0131 da uygular. Uygulama katman\u0131 ile veri katman\u0131 aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131rmak i\u00e7in, Umami Prisma ORM (Object-Relational Mapper) kullan\u0131r. Prisma, geli\u015ftiricilerin veri taban\u0131yla JavaScript\/TypeScript kodlar\u0131 arac\u0131l\u0131\u011f\u0131yla etkile\u015fime girmesini sa\u011flayarak, SQL sorgular\u0131 yazma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve veri taban\u0131 i\u015flemlerini daha g\u00fcvenli ve hata yapmaya daha az meyilli hale getirir.<\/p>\n<p>Son olarak, Veri Katman\u0131, Umami taraf\u0131ndan toplanan t\u00fcm analitik verileri saklar. Umami, PostgreSQL, MySQL ve SQLite gibi \u00e7e\u015fitli ili\u015fkisel veri tabanlar\u0131n\u0131 destekler. Bu esneklik, kullan\u0131c\u0131lar\u0131n kendi altyap\u0131 tercihlerine g\u00f6re se\u00e7im yapmas\u0131na olanak tan\u0131r. Prisma&#8217;n\u0131n devreye girmesiyle, veri taban\u0131 \u015femas\u0131 tan\u0131mlar\u0131 tek bir yerde (<code>prisma\/schema.prisma<\/code>) y\u00f6netilir ve veri taban\u0131 migrasyonlar\u0131 kolayca ger\u00e7ekle\u015ftirilebilir. Bu katman, b\u00fcy\u00fck miktarda veriyi verimli bir \u015fekilde depolamak ve h\u0131zl\u0131 bir \u015fekilde sorgulamak i\u00e7in optimize edilmi\u015ftir, b\u00f6ylece kullan\u0131c\u0131lar Umami panosunda anl\u0131k ve do\u011fru bilgilere eri\u015febilirler. T\u00fcm bu katmanlar, birbirleriyle tutarl\u0131 ve g\u00fcvenli bir \u015fekilde ileti\u015fim kurarak Umami&#8217;nin sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu katmanl\u0131 mimari, her katman\u0131n ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesine ve test edilmesine olanak tan\u0131r, bu da projenin bak\u0131m\u0131n\u0131 ve gelecekteki geli\u015ftirmelerini \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n<h3>Umami Dizini Yap\u0131s\u0131: Ana Bile\u015fenler Nas\u0131l Organize Edilir?<\/h3>\n<p>Umami&#8217;nin kod taban\u0131n\u0131 incelemeye ba\u015flad\u0131\u011f\u0131m\u0131zda, en belirgin \u00f6zelliklerinden biri mod\u00fcler ve anla\u015f\u0131l\u0131r dizin yap\u0131s\u0131d\u0131r. Bu yap\u0131, hem yeni geli\u015ftiricilerin projeye h\u0131zla adapte olmas\u0131n\u0131 sa\u011flar hem de mevcut geli\u015ftiricilerin belirli i\u015flevleri veya bile\u015fenleri kolayca bulmas\u0131na yard\u0131mc\u0131 olur. Projenin ana dizininde bir\u00e7ok \u00f6nemli klas\u00f6r ve dosya bulunur, ancak temel fonksiyonelli\u011fi bar\u0131nd\u0131ranlar genellikle \u015funlard\u0131r:<\/p>\n<ul>\n<li><code>src\/<\/code>: Uygulaman\u0131n kaynak kodunun b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 i\u00e7eren ana dizin. \u0130stemci taraf\u0131 bile\u015fenleri, sunucu taraf\u0131 API rotalar\u0131 ve yard\u0131mc\u0131 i\u015flevler burada yer al\u0131r.<\/li>\n<li><code>pages\/<\/code>: Next.js&#8217;in dosya tabanl\u0131 y\u00f6nlendirme sistemini bar\u0131nd\u0131r\u0131r. Her bir JavaScript\/TypeScript dosyas\u0131 (\u00f6rne\u011fin, <code>pages\/dashboard.js<\/code>) bir URL yoluna (<code>\/dashboard<\/code>) kar\u015f\u0131l\u0131k gelir.<\/li>\n<li><code>components\/<\/code>: Yeniden kullan\u0131labilir React bile\u015fenlerini i\u00e7erir. UI elemanlar\u0131ndan daha karma\u015f\u0131k mod\u00fcllere kadar her \u015fey burada d\u00fczenlenir.<\/li>\n<li><code>lib\/<\/code>: Uygulaman\u0131n genelinde kullan\u0131lan yard\u0131mc\u0131 fonksiyonlar, servisler ve \u00f6zel kancalar (hooks) gibi payla\u015f\u0131lan mant\u0131k kodlar\u0131 bulunur.<\/li>\n<li><code>styles\/<\/code>: Global stilleri veya tema tan\u0131mlamalar\u0131n\u0131 i\u00e7erir. Genellikle CSS de\u011fi\u015fkenleri veya Tailwind CSS konfig\u00fcrasyonlar\u0131 gibi yap\u0131land\u0131rmalar burada yer alabilir.<\/li>\n<li><code>prisma\/<\/code>: Veri taban\u0131 \u015femas\u0131 tan\u0131m\u0131n\u0131 (<code>schema.prisma<\/code>) ve veri taban\u0131 migrasyon dosyalar\u0131n\u0131 i\u00e7erir. Prisma ORM&#8217;in yap\u0131land\u0131rma ve y\u00f6netim klas\u00f6r\u00fcd\u00fcr.<\/li>\n<li><code>public\/<\/code>: Uygulama taraf\u0131ndan do\u011frudan sunulan statik dosyalar (resimler, fontlar, izleme beti\u011fi vb.) burada yer al\u0131r.<\/li>\n<li><code>scripts\/<\/code>: Genellikle veri taban\u0131 tohumlama (seeding), build i\u015flemleri veya di\u011fer otomasyon g\u00f6revleri i\u00e7in kullan\u0131lan yard\u0131mc\u0131 betikler bulunur.<\/li>\n<li><code>db\/<\/code>: Veri taban\u0131 etkile\u015fimleri i\u00e7in kullan\u0131lan servisleri veya istemcileri i\u00e7erebilir. Bazen <code>lib<\/code> alt\u0131na da entegre edilebilir.<\/li>\n<\/ul>\n<p>Bu temel dizin yap\u0131s\u0131, Umami&#8217;nin ana i\u015flevlerini mant\u0131ksal olarak ay\u0131rarak, kod taban\u0131n\u0131 daha y\u00f6netilebilir hale getirir. \u00d6rne\u011fin, bir geli\u015ftirici bir aray\u00fcz sorununu gidermek istedi\u011finde do\u011frudan <code>components\/<\/code> dizinine bakabilirken, bir veri taban\u0131 hatas\u0131 i\u00e7in <code>prisma\/<\/code> veya <code>db\/<\/code> dizinlerine y\u00f6nelecektir.<\/p>\n<div class=\"expert-tip\">Uzman \u0130pucu: Dizin yap\u0131s\u0131n\u0131n netli\u011fi, \u00f6zellikle yeni \u00f6zellik eklerken veya mevcut bir hatay\u0131 giderirken size zaman kazand\u0131r\u0131r. Bir \u00f6zelli\u011fin nerede olmas\u0131 gerekti\u011fini bilmek, &#8220;nereden ba\u015flamal\u0131y\u0131m?&#8221; sorusunu ortadan kald\u0131r\u0131r.<\/div>\n<p>A\u015fa\u011f\u0131da, Umami&#8217;nin ana dizin yap\u0131s\u0131n\u0131n basitle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc bulabilirsiniz:<\/p>\n<pre><code>\n    umami\/\n    \u251c\u2500\u2500 .next\/                  # Next.js build \u00e7\u0131kt\u0131lar\u0131\n    \u251c\u2500\u2500 node_modules\/           # Node.js ba\u011f\u0131ml\u0131l\u0131klar\u0131\n    \u251c\u2500\u2500 public\/                 # Statik dosyalar (resimler, izleme beti\u011fi)\n    \u2502   \u2514\u2500\u2500 umami.js            # Analitik izleme beti\u011fi\n    \u251c\u2500\u2500 prisma\/                 # Prisma ORM dosyalar\u0131\n    \u2502   \u2514\u2500\u2500 schema.prisma       # Veri taban\u0131 \u015femas\u0131\n    \u251c\u2500\u2500 src\/\n    \u2502   \u251c\u2500\u2500 api\/                # API rotalar\u0131 (eski yap\u0131da, \u015fimdi pages\/api i\u00e7inde)\n    \u2502   \u251c\u2500\u2500 components\/         # Yeniden kullan\u0131labilir React bile\u015fenleri\n    \u2502   \u2502   \u251c\u2500\u2500 charts\/\n    \u2502   \u2502   \u251c\u2500\u2500 common\/\n    \u2502   \u2502   \u2514\u2500\u2500 dashboard\/\n    \u2502   \u251c\u2500\u2500 lib\/                # Yard\u0131mc\u0131 fonksiyonlar ve servisler\n    \u2502   \u2502   \u251c\u2500\u2500 db\/             # Veri taban\u0131 ba\u011flant\u0131s\u0131 ve sorgular\u0131\n    \u2502   \u2502   \u2514\u2500\u2500 utils\/\n    \u2502   \u251c\u2500\u2500 pages\/              # Next.js y\u00f6nlendirmeleri ve API rotalar\u0131\n    \u2502   \u2502   \u251c\u2500\u2500 api\/            # Sunucu taraf\u0131 API rotalar\u0131\n    \u2502   \u2502   \u2502   \u251c\u2500\u2500 collect.ts\n    \u2502   \u2502   \u2502   \u2514\u2500\u2500 auth\/\n    \u2502   \u2502   \u251c\u2500\u2500 _app.js\n    \u2502   \u2502   \u2514\u2500\u2500 index.js        # Ana sayfa\n    \u2502   \u2514\u2500\u2500 styles\/             # Global stiller\n    \u251c\u2500\u2500 .env.example            # Ortam de\u011fi\u015fkenleri \u00f6rne\u011fi\n    \u251c\u2500\u2500 package.json            # Proje ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve betikleri\n    \u2514\u2500\u2500 README.md               # Proje a\u00e7\u0131klamas\u0131\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu yap\u0131, Umami'nin her bir par\u00e7ac\u0131\u011f\u0131n\u0131n belirli bir amaca hizmet etmesini ve kolayca bulunabilir olmas\u0131n\u0131 sa\u011flar. \u00d6zellikle <code>src<\/code> klas\u00f6r\u00fc alt\u0131nda, uygulaman\u0131n kalbi atar. Burada, kullan\u0131c\u0131 aray\u00fcz\u00fcnden veri taban\u0131 etkile\u015fimlerine kadar her \u015feyin mant\u0131ksal bir d\u00fczende yer ald\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz. Bu d\u00fczen, sadece okunabilirli\u011fi art\u0131rmakla kalmaz, ayn\u0131 zamanda farkl\u0131 geli\u015ftiricilerin ayn\u0131 kod taban\u0131 \u00fczerinde e\u015f zamanl\u0131 ve \u00e7at\u0131\u015fmas\u0131z \u00e7al\u0131\u015fabilmesine olanak tan\u0131r. Mod\u00fclerlik ilkesi, Umami'nin yap\u0131s\u0131nda kilit bir rol oynar ve bu da onu a\u00e7\u0131k kaynak bir proje olarak \u00e7ok daha eri\u015filebilir k\u0131lar.<\/p>\n<h3>Bile\u015fen Tabanl\u0131 Yakla\u015f\u0131m: Umami UI\/UX Geli\u015ftirmeyi Nas\u0131l Kolayla\u015ft\u0131r\u0131yor?<\/h3>\n<p>Umami'nin kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) ve kullan\u0131c\u0131 deneyimi (UX) geli\u015ftirme s\u00fcre\u00e7lerini h\u0131zland\u0131ran ve kolayla\u015ft\u0131ran en \u00f6nemli tasar\u0131m tercihlerinden biri, React'in sundu\u011fu bile\u015fen tabanl\u0131 yakla\u015f\u0131md\u0131r. Bu yakla\u015f\u0131m, karma\u015f\u0131k UI'lar\u0131 daha k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara b\u00f6lerek geli\u015ftirme s\u00fcrecini basitle\u015ftirir. Umami'de bu durum, <code>src\/components<\/code> dizininin zengin i\u00e7eri\u011fiyle a\u00e7\u0131k\u00e7a g\u00f6r\u00fcl\u00fcr. Bu dizin alt\u0131nda, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde tekrar tekrar kullan\u0131labilen atomik elementlerden (d\u00fc\u011fmeler, giri\u015f alanlar\u0131) daha karma\u015f\u0131k mod\u00fcllere (grafikler, tablolar, formlar) kadar geni\u015f bir yelpazede bile\u015fenler bulunur.<\/p>\n<p>Her bir bile\u015fen, kendi i\u00e7inde bir UI par\u00e7as\u0131n\u0131n mant\u0131\u011f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kapsar. \u00d6rne\u011fin, bir \"Chart\" bile\u015feni, analitik verileri g\u00f6rselle\u015ftirmek i\u00e7in kullan\u0131l\u0131rken, \"Button\" bile\u015feni etkile\u015fimli \u00f6\u011feler i\u00e7in temel i\u015flevselli\u011fi sa\u011flar. Bu mod\u00fclerlik, geli\u015ftiricilerin bir \u00f6zelli\u011fi veya bir hata d\u00fczeltmesini yaparken t\u00fcm uygulamay\u0131 etkilemeden belirli bir bile\u015fen \u00fczerinde odaklanmas\u0131na olanak tan\u0131r. Ayr\u0131ca, yeni bir \u00f6zellik eklenmesi gerekti\u011finde, mevcut bile\u015fenler yeniden kullan\u0131larak veya yeni, \u00f6zelle\u015fmi\u015f bile\u015fenler olu\u015fturularak geli\u015ftirme s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131l\u0131r. Bu yakla\u015f\u0131m, ayn\u0131 zamanda test edilebilirli\u011fi de art\u0131r\u0131r, \u00e7\u00fcnk\u00fc her bir bile\u015fen ba\u011f\u0131ms\u0131z olarak test edilebilir ve bu da hata olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r.<\/p>\n<p><code>src\/pages<\/code> dizini ise, Next.js'in dosya tabanl\u0131 y\u00f6nlendirme sistemine uygun olarak, belirli URL yollar\u0131na kar\u015f\u0131l\u0131k gelen sayfalar\u0131 bar\u0131nd\u0131r\u0131r. Her bir sayfa, genellikle birden fazla bile\u015fenin bir araya gelmesiyle olu\u015fur. \u00d6rne\u011fin, <code>pages\/dashboard.js<\/code> sayfas\u0131, \"Chart\" bile\u015fenleri, \"Table\" bile\u015fenleri ve di\u011fer k\u00fc\u00e7\u00fck UI bile\u015fenlerini birle\u015ftirerek kullan\u0131c\u0131lara kapsaml\u0131 bir analitik panosu sunar. Bu ayr\u0131m, sayfa d\u00fczeyindeki mant\u0131k ile yeniden kullan\u0131labilir UI mant\u0131\u011f\u0131n\u0131 birbirinden ay\u0131rarak kodun okunabilirli\u011fini ve y\u00f6netilebilirli\u011fini art\u0131r\u0131r.<\/p>\n<pre><code>\n    \/\/ src\/components\/charts\/BarChart.js \u00f6rne\u011fi\n    import React from 'react';\n    import { Bar } from 'react-chartjs-2';\n\n    const BarChart = ({ data, options }) => {\n      return (\n        <div className=\"chart-container\">\n          <Bar data={data} options={options} \/>\n        <\/div>\n      );\n    };\n\n    export default BarChart;\n\n    \/\/ src\/pages\/dashboard.js i\u00e7inde kullan\u0131m\u0131\n    import React from 'react';\n    import BarChart from 'components\/charts\/BarChart';\n    import Button from 'components\/common\/Button';\n\n    const Dashboard = () => {\n      const chartData = { \/* ... *\/ };\n      const chartOptions = { \/* ... *\/ };\n\n      return (\n        <div>\n          <h1>Dashboard<\/h1>\n          <Button onClick={() => console.log(\"Rapor \u0130ndir\")} >Rapor \u0130ndir<\/Button>\n          <BarChart data={chartData} options={chartOptions} \/>\n        <\/div>\n      );\n    };\n\n    export default Dashboard;\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu yap\u0131n\u0131n bir di\u011fer faydas\u0131 da, Umami'nin mobil uyumlu tasar\u0131m\u0131n\u0131 desteklemesidir. Bile\u015fenler, farkl\u0131 ekran boyutlar\u0131na ve cihazlara duyarl\u0131 olacak \u015fekilde tasarlanabilir. Modern CSS teknikleri ve CSS-in-JS k\u00fct\u00fcphaneleri (\u00f6rne\u011fin Styled Components veya Emotion), bile\u015fenlerin i\u00e7ine entegre edilebilir ve medya sorgular\u0131 (media queries) ile mobil cihazlarda farkl\u0131 g\u00f6r\u00fcn\u00fcmler sunabilir. Umami'nin kendisi genellikle Tailwind CSS gibi bir utility-first CSS \u00e7er\u00e7evesini kullan\u0131r ve bu da responsive tasar\u0131mlar\u0131n do\u011frudan HTML i\u015faretlemesi i\u00e7inde tan\u0131mlanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. B\u00f6ylece, hem masa\u00fcst\u00fc hem de mobil kullan\u0131c\u0131lara tutarl\u0131 ve optimize edilmi\u015f bir deneyim sunulur. Neticede, bile\u015fen tabanl\u0131 yakla\u015f\u0131m, Umami'nin UI\/UX geli\u015ftirmesinde \u00e7eviklik, tutarl\u0131l\u0131k ve \u00f6l\u00e7eklenebilirlik sa\u011flamaktad\u0131r.<\/p>\n<h3>Veri Y\u00f6netimi ve API Katman\u0131: Umami Verileri Nas\u0131l \u0130\u015fliyor?<\/h3>\n<p>Umami'nin temel i\u015flevselli\u011fi, web sitesi ziyaret\u00e7ilerinden veri toplamak, bu verileri g\u00fcvenli bir \u015fekilde depolamak ve daha sonra anlaml\u0131 raporlar halinde sunmakt\u0131r. Bu s\u00fcre\u00e7, uygulaman\u0131n veri y\u00f6netimi ve API katman\u0131 taraf\u0131ndan titizlikle y\u00fcr\u00fct\u00fcl\u00fcr. Bu katman, \u00f6zellikle <code>src\/lib<\/code>, <code>prisma<\/code> ve <code>pages\/api<\/code> dizinleri etraf\u0131nda \u015fekillenmi\u015ftir. Birinci olarak, veri toplama s\u00fcreci, istemci taraf\u0131nda \u00e7al\u0131\u015fan ve <code>public\/umami.js<\/code> konumunda bulunan hafif bir izleme beti\u011fi arac\u0131l\u0131\u011f\u0131yla ba\u015flar. Bu betik, sayfa g\u00f6r\u00fcnt\u00fclemeleri, etkinlikler ve di\u011fer kullan\u0131c\u0131 etkile\u015fimleri gibi verileri toplar ve bunlar\u0131 arka u\u00e7taki bir API u\u00e7 noktas\u0131na (genellikle <code>\/api\/collect<\/code>) g\u00f6nderir.<\/p>\n<p><code>pages\/api<\/code> dizini, Next.js'in sunucu taraf\u0131 API rotalar\u0131n\u0131 i\u00e7erir. Bu rotalar, bir Next.js uygulamas\u0131n\u0131n Node.js arka ucu olarak i\u015flev g\u00f6r\u00fcr. Her bir API dosyas\u0131, belirli bir HTTP iste\u011fine (GET, POST, PUT, DELETE) yan\u0131t veren bir sunucu taraf\u0131 i\u015flevini temsil eder. \u00d6rne\u011fin, <code>pages\/api\/collect.ts<\/code> dosyas\u0131, izleme beti\u011finden gelen veri toplama isteklerini i\u015fler. Bu API rotas\u0131, gelen verileri do\u011frular, i\u015fler ve g\u00fcvenli bir \u015fekilde veri taban\u0131na kaydeder. G\u00fcvenlik, bu katmanda kritik bir \u00f6neme sahiptir; bu nedenle, API u\u00e7 noktalar\u0131 yetkisiz eri\u015fimi engellemek ve k\u00f6t\u00fc niyetli veri g\u00f6nderimlerini filtrelemek i\u00e7in gerekli kimlik do\u011frulama ve do\u011frulama mant\u0131\u011f\u0131n\u0131 i\u00e7erir.<\/p>\n<div class=\"expert-tip\">Uzman \u0130pucu: API rotalar\u0131nda veri do\u011frulamay\u0131 her zaman sunucu taraf\u0131nda yap\u0131n. \u0130stemci taraf\u0131 do\u011frulama kullan\u0131c\u0131 taraf\u0131ndan atlat\u0131labilir, ancak sunucu taraf\u0131 do\u011frulama, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc ve g\u00fcvenli\u011fini garanti alt\u0131na al\u0131r.<\/div>\n<p>Veri taban\u0131 etkile\u015fimi, Prisma ORM (Object-Relational Mapper) arac\u0131l\u0131\u011f\u0131yla y\u00f6netilir. <code>prisma<\/code> dizini, Umami'nin veri taban\u0131 \u015femas\u0131n\u0131n kalbini olu\u015fturan <code>schema.prisma<\/code> dosyas\u0131n\u0131 bar\u0131nd\u0131r\u0131r. Bu dosya, uygulaman\u0131n veri modellerini (\u00f6rne\u011fin, <code>Website<\/code>, <code>Session<\/code>, <code>PageView<\/code>, <code>Event<\/code>) ve bunlar aras\u0131ndaki ili\u015fkileri tan\u0131mlar. Prisma, bu \u015fema dosyas\u0131ndan yola \u00e7\u0131karak veri taban\u0131 migrasyonlar\u0131n\u0131 olu\u015fturur ve geli\u015ftiricilerin veri taban\u0131yla JavaScript\/TypeScript nesneleri arac\u0131l\u0131\u011f\u0131yla etkile\u015fim kurmas\u0131n\u0131 sa\u011flayan g\u00fc\u00e7l\u00fc bir istemci k\u00fct\u00fcphanesi \u00fcretir. Bu sayede, SQL sorgular\u0131 do\u011frudan yazmak yerine, geli\u015ftiriciler tan\u0131d\u0131k JavaScript s\u00f6zdizimi ile veri taban\u0131 i\u015flemleri ger\u00e7ekle\u015ftirebilirler, bu da hata oran\u0131n\u0131 azalt\u0131r ve geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r.<\/p>\n<p>Veri taban\u0131 etkile\u015fimleri i\u00e7in kullan\u0131lan yard\u0131mc\u0131 fonksiyonlar ve servisler genellikle <code>src\/lib\/db<\/code> dizininde yer al\u0131r. Bu, veri taban\u0131 sorgular\u0131n\u0131n ve i\u015flemlerinin tek bir merkezi konumda toplanmas\u0131n\u0131 sa\u011flar, b\u00f6ylece kodun yeniden kullan\u0131labilirli\u011fi artar ve veri eri\u015fim mant\u0131\u011f\u0131 daha tutarl\u0131 hale gelir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n belirli bir site i\u00e7in t\u00fcm ziyaret\u00e7i istatistiklerini almak istedi\u011fi zaman, bu iste\u011fi i\u015fleyen API rotas\u0131, <code>src\/lib\/db<\/code> i\u00e7indeki uygun bir fonksiyonu \u00e7a\u011f\u0131rarak veri taban\u0131ndan bilgi al\u0131r ve istemciye g\u00f6nderir. Bu katmanl\u0131 yakla\u015f\u0131m, Umami'nin veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korurken y\u00fcksek performansl\u0131 veri i\u015fleme yetenekleri sunmas\u0131na olanak tan\u0131r. Kullan\u0131lan modern ara\u00e7lar ve prensipler sayesinde, Umami hem g\u00fcvenilir hem de etkili bir analitik \u00e7\u00f6z\u00fcm\u00fc sunmaktad\u0131r.<\/p>\n<pre><code>\n    \/\/ prisma\/schema.prisma dosyas\u0131ndan \u00f6rnek bir model tan\u0131m\u0131\n    datasource db {\n      provider = \"postgresql\" \/\/ veya \"mysql\", \"sqlite\"\n      url      = env(\"DATABASE_URL\")\n    }\n\n    generator client {\n      provider = \"prisma-client-js\"\n    }\n\n    model Website {\n      id        String    @id @default(cuid())\n      userId    String\n      name      String    @unique\n      domain    String?\n      shareId   String?   @unique\n      createdAt DateTime  @default(now())\n      updatedAt DateTime  @updatedAt\n      resets    Int       @default(0)\n      sessions  Session[]\n      pageviews Pageview[]\n      events    Event[]\n\n      @@index([userId])\n    }\n    <\/pre>\n<p><\/code><\/p>\n<pre><code>\n    \/\/ pages\/api\/collect.ts (basitle\u015ftirilmi\u015f \u00f6rnek)\n    import { NextApiRequest, NextApiResponse } from 'next';\n    import { validateRequest, saveSession, savePageView } from 'lib\/db'; \/\/ lib\/db i\u00e7indeki yard\u0131mc\u0131 fonksiyonlar\n\n    export default async function handler(req: NextApiRequest, res: NextApiResponse) {\n      if (req.method === 'POST') {\n        const { payload } = req.body;\n\n        try {\n          \/\/ Gelen veriyi do\u011frula\n          if (!validateRequest(payload)) {\n            return res.status(400).json({ error: 'Ge\u00e7ersiz veri' });\n          }\n\n          \/\/ Oturumu kaydet\n          const session = await saveSession(payload.sessionData);\n\n          \/\/ Sayfa g\u00f6r\u00fcnt\u00fclemesini kaydet\n          await savePageView(payload.pageViewData, session.id);\n\n          return res.status(200).json({ message: 'Veri ba\u015far\u0131yla kaydedildi' });\n\n        } catch (error) {\n          console.error('Veri kaydederken hata olu\u015ftu:', error);\n          return res.status(500).json({ error: 'Sunucu hatas\u0131' });\n        }\n      }\n      return res.status(405).end(); \/\/ Sadece POST isteklerine izin ver\n    }\n    <\/pre>\n<p><\/code><\/p>\n<h2>Performans ve \u00d6l\u00e7eklenebilirlik \u0130\u00e7in Yap\u0131sal \u0130pu\u00e7lar\u0131 Nelerdir?<\/h2>\n<p>Umami gibi bir analitik arac\u0131nda performans ve \u00f6l\u00e7eklenebilirlik, uygulaman\u0131n ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. \u0130yi tasarlanm\u0131\u015f bir proje yap\u0131s\u0131, bu hedeflere ula\u015fmada \u00f6nemli bir rol oynar. Umami'nin Next.js tabanl\u0131 mimarisi ve mod\u00fcler dizin yap\u0131s\u0131, performans optimizasyonu ve \u00f6l\u00e7eklenebilirlik i\u00e7in \u00e7e\u015fitli do\u011fal avantajlar sunar. \u0130lk olarak, Next.js'in kod b\u00f6lme (code splitting) \u00f6zelli\u011fi, uygulaman\u0131n yaln\u0131zca o anda ihtiya\u00e7 duyulan JavaScript kodunu y\u00fcklemesini sa\u011flar. Bu, \u00f6zellikle b\u00fcy\u00fck ve \u00f6zellik a\u00e7\u0131s\u0131ndan zengin uygulamalarda ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. <code>pages\/<\/code> dizinindeki her bir sayfa, kendi ba\u011f\u0131ms\u0131z JavaScript paketine derlenir ve bu da kullan\u0131c\u0131n\u0131n yaln\u0131zca ziyaret etti\u011fi sayfan\u0131n kodunu indirmesi anlam\u0131na gelir. Benzer \u015fekilde, dinamik importlar kullan\u0131larak belirli bile\u015fenler veya mod\u00fcller yaln\u0131zca gerekti\u011finde y\u00fcklenebilir, bu da sayfa d\u00fczeyinde performans\u0131 daha da art\u0131r\u0131r.<\/p>\n<p>Veri taban\u0131 taraf\u0131nda, Prisma ORM kullan\u0131m\u0131, optimize edilmi\u015f ve g\u00fcvenli sorgular\u0131n yaz\u0131lmas\u0131na yard\u0131mc\u0131 olur. <code>src\/lib\/db<\/code> i\u00e7indeki veri taban\u0131 etkile\u015fim fonksiyonlar\u0131n\u0131n merkezi bir yerde toplanmas\u0131, sorgular\u0131n tekille\u015ftirilmesini ve potansiyel performans darbo\u011fazlar\u0131n\u0131n daha kolay tespit edilmesini sa\u011flar. Veri \u00f6nbellekleme stratejileri (\u00f6rne\u011fin, Redis gibi bir in-memory veri deposu kullanarak s\u0131k eri\u015filen verileri \u00f6nbelle\u011fe almak), veri taban\u0131 y\u00fck\u00fcn\u00fc azaltabilir ve API yan\u0131t s\u00fcrelerini h\u0131zland\u0131rabilir. Umami'nin, genellikle PostgreSQL gibi ili\u015fkisel veri tabanlar\u0131 kullanmas\u0131, do\u011fru indeksleme ve sorgu optimizasyonlar\u0131 ile b\u00fcy\u00fck veri k\u00fcmeleri \u00fczerinde bile y\u00fcksek performansl\u0131 analizler yap\u0131lmas\u0131na olanak tan\u0131r.<\/p>\n<p>\u00d6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan, Umami'nin API katman\u0131, stateless (durumsuz) bir yap\u0131ya sahip olacak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Next.js API rotalar\u0131 sunucuya \u00f6zel bir durum tutmaz, bu da uygulaman\u0131n birden fazla sunucuya kolayca da\u011f\u0131t\u0131labilmesini ve y\u00fck dengeleyicilerle birlikte \u00e7al\u0131\u015fabilmesini sa\u011flar. \u00d6rne\u011fin, bir analitik panosu ayn\u0131 anda binlerce veya milyonlarca siteyi izledi\u011finde ve her saniye y\u00fcz binlerce veri noktas\u0131 toplad\u0131\u011f\u0131nda, bu stateless mimari, gelen trafi\u011fi birden fazla sunucuya yayarak tek bir hata noktas\u0131n\u0131 ortadan kald\u0131r\u0131r ve performans\u0131 korur. Bu, Umami'nin artan kullan\u0131c\u0131 taleplerine sorunsuz bir \u015fekilde yan\u0131t vermesini sa\u011flar. Ayr\u0131ca, a\u00e7\u0131k kaynak do\u011fas\u0131 gere\u011fi, topluluk taraf\u0131ndan s\u00fcrekli olarak yeni optimizasyonlar ve geli\u015ftirmeler \u00f6nerilebilir ve entegre edilebilir.<\/p>\n<p class=\"expert-tip\">Uzman \u0130pucu: B\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken, veri taban\u0131 sorgular\u0131n\u0131z\u0131 her zaman dikkatlice optimize edin. Gerekli indeksleri eklemek ve N+1 sorgu sorunlar\u0131ndan ka\u00e7\u0131nmak, Umami'nin performans\u0131n\u0131 %40'a kadar art\u0131rabilir. Ayr\u0131ca, sunucu taraf\u0131nda API yan\u0131tlar\u0131n\u0131 \u00f6nbelle\u011fe almak, s\u0131k eri\u015filen veriler i\u00e7in istemciye daha h\u0131zl\u0131 yan\u0131t s\u00fcreleri sa\u011flayabilir.<\/p>\n<p>Ger\u00e7ek d\u00fcnya senaryosunda, Umami'nin mod\u00fcler yap\u0131s\u0131 sayesinde yeni bir \"ger\u00e7ek zamanl\u0131 ziyaret\u00e7i\" \u00f6zelli\u011fi eklenmesi gerekti\u011finde, geli\u015ftiriciler mevcut \"collect\" API'sini optimize edebilir, yeni bir WebSocket veya sunucu taraf\u0131 olaylar (SSE) API rotas\u0131 ekleyebilir ve yaln\u0131zca bu yeni \u00f6zellik i\u00e7in gereken bile\u015fenleri olu\u015fturabilirler. Bu, t\u00fcm sistemin yeniden yaz\u0131lmas\u0131n\u0131 gerektirmeden, mevcut stabil yap\u0131y\u0131 koruyarak h\u0131zla yeni yetenekler entegre etmelerini sa\u011flar. Bu vaka, Umami'nin yap\u0131s\u0131n\u0131n sadece mevcut operasyonlar\u0131 desteklemekle kalmay\u0131p, gelecekteki b\u00fcy\u00fcme ve \u00f6zellik geni\u015fletmeleri i\u00e7in de ne kadar sa\u011flam bir temel olu\u015fturdu\u011funu g\u00f6stermektedir. Dolay\u0131s\u0131yla, Umami'nin projesi, hem \u015fu anki operasyonel verimlili\u011fi hem de gelecekteki geni\u015fleme potansiyelini destekleyen ak\u0131ll\u0131ca tasarlanm\u0131\u015f bir yap\u0131n\u0131n m\u00fckemmel bir \u00f6rne\u011fidir.<\/p>\n<h2>Sonu\u00e7: Umami Proje Yap\u0131s\u0131n\u0131n Gelece\u011fi ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Bu kapsaml\u0131 incelememizde, Umami'nin kod taban\u0131n\u0131n ne kadar d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f ve sa\u011flam bir mimariye sahip oldu\u011funu detayl\u0131ca g\u00f6rd\u00fck. Umami'nin Next.js, React ve Node.js gibi modern teknolojileri kullanarak olu\u015fturdu\u011fu bu yap\u0131, uygulaman\u0131n sadece bug\u00fcnk\u00fc ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamakla kalm\u0131yor, ayn\u0131 zamanda gelecekteki b\u00fcy\u00fcmesi ve geli\u015fimi i\u00e7in de g\u00fc\u00e7l\u00fc bir temel olu\u015fturuyor. Mod\u00fcler dizin yap\u0131s\u0131, bile\u015fen tabanl\u0131 UI\/UX yakla\u015f\u0131m\u0131 ve iyi tan\u0131mlanm\u0131\u015f API\/veri y\u00f6netimi katmanlar\u0131, Umami'yi hem geli\u015ftiriciler i\u00e7in eri\u015filebilir hem de kullan\u0131c\u0131lar i\u00e7in performansl\u0131 bir analitik arac\u0131 haline getiriyor.<\/p>\n<p>Umami'nin ba\u015far\u0131s\u0131n\u0131n anahtarlar\u0131ndan biri, \u015f\u00fcphesiz ki a\u00e7\u0131k kaynak do\u011fas\u0131 ve toplulu\u011fun bu yap\u0131 \u00fczerindeki s\u00fcrekli katk\u0131lar\u0131d\u0131r. Net ve tutarl\u0131 bir proje yap\u0131s\u0131, yeni kat\u0131l\u0131mc\u0131lar\u0131n projeye kolayca adapte olmas\u0131n\u0131 ve de\u011ferli katk\u0131larda bulunmas\u0131n\u0131 sa\u011flar. Bu da Umami'nin s\u00fcrekli evrimle\u015fen web analitik d\u00fcnyas\u0131nda rekabet\u00e7i kalmas\u0131na ve yeni \u00f6zelliklerle zenginle\u015fmesine yard\u0131mc\u0131 olur. Gelecekte, Umami'nin daha fazla entegrasyon, geli\u015fmi\u015f raporlama se\u00e7enekleri ve belki de makine \u00f6\u011frenimi tabanl\u0131 i\u00e7g\u00f6r\u00fcler sunmas\u0131 beklenebilir. Mevcut yap\u0131, bu t\u00fcr geni\u015fletmeleri sorunsuz bir \u015fekilde entegre etme esnekli\u011fini fazlas\u0131yla sunmaktad\u0131r.<\/p>\n<p>\u00d6zetle, Umami'nin proje yap\u0131s\u0131, modern web geli\u015ftirme prensiplerinin pratik bir uygulamas\u0131n\u0131 sergiliyor: mod\u00fclerlik, \u00f6l\u00e7eklenebilirlik, bak\u0131m kolayl\u0131\u011f\u0131 ve y\u00fcksek performans. Bu yap\u0131sal analiz, sadece Umami'yi daha iyi anlamam\u0131z\u0131 sa\u011flamakla kalmad\u0131, ayn\u0131 zamanda kendi projelerimizde de uygulayabilece\u011fimiz de\u011ferli dersler ve en iyi uygulamalar hakk\u0131nda bize rehberlik etti. Bu sayede, Umami sadece bir analitik arac\u0131 olman\u0131n \u00f6tesinde, modern ve s\u00fcrd\u00fcr\u00fclebilir bir yaz\u0131l\u0131m geli\u015ftirme metodolojisinin somut bir \u00f6rne\u011fi olarak \u00f6ne \u00e7\u0131k\u0131yor.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<dl>\n<dt>Umami'nin proje yap\u0131s\u0131 neden bu kadar mod\u00fcler?<\/dt>\n<dd>Umami'nin proje yap\u0131s\u0131, kodun daha kolay okunabilmesi, s\u00fcrd\u00fcr\u00fclebilmesi ve farkl\u0131 geli\u015ftiricilerin ayn\u0131 proje \u00fczerinde e\u015f zamanl\u0131 \u00e7al\u0131\u015fabilmesi i\u00e7in mod\u00fcler olarak tasarlanm\u0131\u015ft\u0131r. Bu mod\u00fclerlik, ayn\u0131 zamanda test s\u00fcre\u00e7lerini basitle\u015ftirir ve yeni \u00f6zelliklerin entegrasyonunu h\u0131zland\u0131r\u0131r.<\/dd>\n<dt>Yeni bir \u00f6zellik eklerken hangi dizinlere odaklanmal\u0131y\u0131m?<\/dt>\n<dd>Yeni bir \u00f6zellik eklerken genellikle <code>src\/pages<\/code> (yeni bir sayfa veya API rotas\u0131 i\u00e7in), <code>src\/components<\/code> (aray\u00fcz bile\u015fenleri i\u00e7in), <code>src\/lib<\/code> (yard\u0131mc\u0131 fonksiyonlar ve servisler i\u00e7in) ve <code>prisma<\/code> (veri taban\u0131 \u015fema de\u011fi\u015fiklikleri veya migrasyonlar\u0131 i\u00e7in) dizinlerine odaklanman\u0131z gerekecektir. \u00d6zelli\u011fin niteli\u011fine g\u00f6re bu dizinlerin kombinasyonlar\u0131 kullan\u0131labilir.<\/dd>\n<dt>Umami performans\u0131n\u0131 art\u0131rmak i\u00e7in yap\u0131sal olarak neler yapabilirim?<\/dt>\n<dd>Performans\u0131 art\u0131rmak i\u00e7in yap\u0131sal olarak kod b\u00f6lme (code splitting) ve dinamik importlar\u0131 etkin kullanabilir, veri taban\u0131 sorgular\u0131n\u0131 <code>src\/lib\/db<\/code> i\u00e7inde optimize edebilir, uygun indeksleri ekleyebilir ve s\u0131k eri\u015filen veriler i\u00e7in \u00f6nbellekleme mekanizmalar\u0131 uygulayabilirsiniz. Ayr\u0131ca, API rotalar\u0131nda gereksiz y\u00fck\u00fc azaltmak da performansa katk\u0131da bulunur.<\/dd>\n<dt>Umami codebase'ine katk\u0131da bulunmak isteyenler i\u00e7in ilk ad\u0131mlar nelerdir?<\/dt>\n<dd>Umami codebase'ine katk\u0131da bulunmak i\u00e7in ilk ad\u0131mlar, projenin GitHub deposunu klonlamak, <code>README.md<\/code> dosyas\u0131n\u0131 okuyarak kurulum y\u00f6nergelerini takip etmek ve ard\u0131ndan mevcut \"issues\" (sorunlar) veya \"pull request\" (\u00e7ekme talepleri) listesini incelemektir. Genellikle k\u00fc\u00e7\u00fck bir hata d\u00fczeltmesi veya basit bir \u00f6zellik ekleyerek ba\u015flamak iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Ayr\u0131ca, projenin ileti\u015fim kanallar\u0131na kat\u0131larak geli\u015ftirici toplulu\u011fuyla etkile\u015fimde bulunabilirsiniz.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Umami&#8217;nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana&hellip;","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":[1],"tags":[],"class_list":{"0":"post-34608","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz<\/title>\n<meta name=\"description\" content=\"Umami&#039;nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz\" \/>\n<meta property=\"og:description\" content=\"Umami&#039;nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-19T15:30:54+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz\",\"datePublished\":\"2025-11-19T15:30:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\"},\"wordCount\":3859,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\",\"name\":\"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-19T15:30:54+00:00\",\"description\":\"Umami'nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz","description":"Umami'nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/","og_locale":"tr_TR","og_type":"article","og_title":"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz","og_description":"Umami'nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!","og_url":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-19T15:30:54+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"21 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz","datePublished":"2025-11-19T15:30:54+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/"},"wordCount":3859,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/","url":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/","name":"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-19T15:30:54+00:00","description":"Umami'nin esnek ve \u00f6l\u00e7eklenebilir proje yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde Umami kod taban\u0131n\u0131n temel mimarisini, ana dizinlerini ve bile\u015fenlerini ad\u0131m ad\u0131m ke\u015ffedin. Performans ve geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in kritik yap\u0131sal ipu\u00e7lar\u0131 burada!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/umami-kod-tabani-proje-yapisi-derinlemesine-bir-analiz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Umami Kod Taban\u0131 Proje Yap\u0131s\u0131: Derinlemesine Bir Analiz"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34608"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34608\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}