{"id":40592,"date":"2026-02-27T23:40:50","date_gmt":"2026-02-27T20:40:50","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40592"},"modified":"2026-02-27T23:40:50","modified_gmt":"2026-02-27T20:40:50","slug":"gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/","title":{"rendered":"Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi"},"content":{"rendered":"<p><body><\/p>\n<h2>Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi<\/h2>\n<p>Web sitelerinin temel yap\u0131 ta\u015flar\u0131ndan biri olan statik dosyalar, modern web geli\u015ftirme s\u00fcre\u00e7lerinde performans\u0131, kullan\u0131c\u0131 deneyimini ve geli\u015ftirici verimlili\u011fini do\u011frudan etkileyen kritik unsurlard\u0131r. Gatsby gibi performans odakl\u0131 bir statik site olu\u015fturucu (SSG) ile \u00e7al\u0131\u015f\u0131rken, bu dosyalar\u0131n do\u011fru ve optimize edilmi\u015f bir \u015fekilde y\u00f6netilmesi, projenizin ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir. Bu makalede, Gatsby projelerinizde resimlerden fontlara, CSS dosyalar\u0131ndan belgelere kadar \u00e7e\u015fitli statik dosyalar\u0131 nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi, Gatsby&#8217;nin sundu\u011fu ara\u00e7lar\u0131 ve en iyi uygulamalar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n<h3>Giri\u015f: Statik Dosyalar\u0131n Web Geli\u015ftirmedeki \u00d6nemi<\/h3>\n<p>Statik dosyalar, bir web sitesinin sunucu taraf\u0131nda i\u015fleme tabi tutulmadan do\u011frudan taray\u0131c\u0131ya g\u00f6nderilen, i\u00e7eri\u011fi de\u011fi\u015fmeyen dosyalard\u0131r. Bunlara genellikle \u015funlar dahildir:<\/p>\n<p>*   <strong>Resimler:<\/strong> JPG, PNG, SVG, GIF, WebP gibi formatlardaki g\u00f6rseller.<br \/>\n*   <strong>Stil Dosyalar\u0131:<\/strong> CSS, Sass, Less gibi stillendirme dilleri.<br \/>\n*   <strong>Betik Dosyalar\u0131:<\/strong> JavaScript dosyalar\u0131.<br \/>\n*   <strong>Fontlar:<\/strong> Web sitelerinde kullan\u0131lan \u00f6zel yaz\u0131 tipleri (WOFF, WOFF2, TTF, OTF).<br \/>\n*   <strong>Medya Dosyalar\u0131:<\/strong> Videolar (MP4, WebM), ses dosyalar\u0131 (MP3, OGG).<br \/>\n*   <strong>Belgeler ve Di\u011ferleri:<\/strong> PDF&#8217;ler, TXT dosyalar\u0131, JSON verileri, favicon&#8217;lar, <code>robots.txt<\/code> gibi \u00f6zel dosyalar.<\/p>\n<p>Bu dosyalar\u0131n verimli bir \u015fekilde sunulmas\u0131, bir web sitesinin y\u00fcklenme h\u0131z\u0131n\u0131, g\u00f6rsel kalitesini ve genel kullan\u0131c\u0131 deneyimini do\u011frudan etkiler. \u00d6zellikle g\u00fcn\u00fcm\u00fcz\u00fcn mobil odakl\u0131 d\u00fcnyas\u0131nda, optimize edilmemi\u015f statik dosyalar, kullan\u0131c\u0131lar\u0131n sitenizden h\u0131zla ayr\u0131lmas\u0131na neden olabilir. Gatsby, bu zorluklar\u0131 a\u015fmak i\u00e7in g\u00fc\u00e7l\u00fc yerle\u015fik optimizasyon ara\u00e7lar\u0131 ve eklentileri sunar.<\/p>\n<h3>Gatsby&#8217;nin Statik Dosya Y\u00f6netimine Farkl\u0131 Bir Bak\u0131\u015f<\/h3>\n<p>Gatsby, bir React tabanl\u0131 statik site olu\u015fturucu oldu\u011fundan, geli\u015ftirme s\u00fcrecinde Webpack ve Babel gibi ara\u00e7lar\u0131 arka planda kullanarak dosyalar\u0131 i\u015fler. Bu, statik dosyalar\u0131n yaln\u0131zca kopyalanmakla kalmay\u0131p, ayn\u0131 zamanda \u00e7e\u015fitli optimizasyonlardan ge\u00e7irilerek \u00fcretim (production) ortam\u0131 i\u00e7in haz\u0131rland\u0131\u011f\u0131 anlam\u0131na gelir. Gatsby&#8217;nin statik dosya y\u00f6netimine yakla\u015f\u0131m\u0131, temelde iki ana kategoriye ayr\u0131labilir:<\/p>\n<p>1.  <strong>Do\u011frudan Kopyalama (Passthrough):<\/strong> <code>static<\/code> klas\u00f6r\u00fcne yerle\u015ftirilen dosyalar, build i\u015flemi s\u0131ras\u0131nda oldu\u011fu gibi <code>public<\/code> klas\u00f6r\u00fcne kopyalan\u0131r. Bu dosyalar \u00fczerinde herhangi bir Webpack i\u015fleme veya optimizasyon yap\u0131lmaz.<br \/>\n2.  <strong>\u0130\u015fleme ve Optimizasyon (Processing and Optimization):<\/strong> <code>src<\/code> klas\u00f6r\u00fc i\u00e7inde veya <code>gatsby-config.js<\/code> arac\u0131l\u0131\u011f\u0131yla tan\u0131mlanan kaynaklardan gelen dosyalar, Webpack taraf\u0131ndan i\u015flenir. Bu i\u015flem, dosya s\u0131k\u0131\u015ft\u0131rma, isimlendirme (cache busting i\u00e7in hash ekleme), format d\u00f6n\u00fc\u015ft\u00fcrme ve \u00f6zel optimizasyonlar (\u00f6zellikle resimler i\u00e7in) i\u00e7erebilir.<\/p>\n<p>Bu iki yakla\u015f\u0131m, geli\u015ftiricilere esneklik sunarken, ayn\u0131 zamanda performans ve geli\u015ftirici deneyimi aras\u0131nda bir denge kurmalar\u0131n\u0131 sa\u011flar. Hangi y\u00f6ntemin ne zaman kullan\u0131laca\u011f\u0131n\u0131 anlamak, Gatsby projelerinizde statik dosyalar\u0131 en verimli \u015fekilde kullanman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>Statik Dosyalar\u0131 Kullanma Y\u00f6ntemleri<\/h3>\n<p>Gatsby&#8217;de statik dosyalar\u0131 kullanmak i\u00e7in birka\u00e7 temel y\u00f6ntem bulunmaktad\u0131r. Her y\u00f6ntemin kendine \u00f6zg\u00fc avantajlar\u0131 ve kullan\u0131m senaryolar\u0131 vard\u0131r.<\/p>\n<h4><code>static<\/code> Klas\u00f6r\u00fc: Do\u011frudan Kopyalama Mekanizmas\u0131<\/h4>\n<p>Gatsby projelerinde <code>static<\/code> ad\u0131nda \u00f6zel bir klas\u00f6r bulunur (proje k\u00f6k dizininde, <code>src<\/code> klas\u00f6r\u00fcn\u00fcn yan\u0131nda). Bu klas\u00f6re yerle\u015ftirdi\u011finiz t\u00fcm dosyalar, Gatsby build i\u015flemi s\u0131ras\u0131nda herhangi bir de\u011fi\u015fiklik yap\u0131lmadan do\u011frudan <code>public<\/code> klas\u00f6r\u00fcn\u00fcn k\u00f6k dizinine kopyalan\u0131r. Bu, dosyalar\u0131n\u0131za web sitesinin k\u00f6k dizininden eri\u015filebilece\u011fi anlam\u0131na gelir.<\/p>\n<h5>Ne Zaman Kullan\u0131lmal\u0131?<\/h5>\n<p>*   <strong>\u0130\u015flenmeye \u0130htiya\u00e7 Duymayan Dosyalar:<\/strong> Favicon&#8217;lar (<code>favicon.ico<\/code>), <code>robots.txt<\/code>, <code>sitemap.xml<\/code>, <code>manifest.json<\/code> gibi dosyalar.<br \/>\n*   <strong>B\u00fcy\u00fck Medya Dosyalar\u0131:<\/strong> \u00c7ok b\u00fcy\u00fck video veya ses dosyalar\u0131 gibi, Webpack taraf\u0131ndan i\u015flenmesi zaman alacak veya anlams\u0131z olacak dosyalar.<br \/>\n*   <strong>\u00dc\u00e7\u00fcnc\u00fc Taraf K\u00fct\u00fcphaneler:<\/strong> CDN&#8217;den y\u00fcklenmeyen ve do\u011frudan da\u011f\u0131t\u0131lmas\u0131 gereken \u00f6zel JavaScript k\u00fct\u00fcphaneleri.<br \/>\n*   <strong>\u00d6zel HTML Dosyalar\u0131:<\/strong> Do\u011frudan eri\u015filmesi gereken \u00f6zel HTML sayfalar\u0131 (\u00f6rne\u011fin, do\u011frulama dosyalar\u0131).<\/p>\n<h5>Nas\u0131l Kullan\u0131l\u0131r?<\/h5>\n<p><code>static<\/code> klas\u00f6r\u00fcndeki bir dosyaya, web sitesinin k\u00f6k dizinine g\u00f6re bir yol kullanarak eri\u015filir. \u00d6rne\u011fin, <code>static\/images\/logo.png<\/code> dosyas\u0131n\u0131 kullanmak i\u00e7in HTML&#8217;de <code>\/images\/logo.png<\/code> yolunu belirtirsiniz:<\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"\/images\/logo.png\" alt=\"\u015eirket Logosu\" \/><\/code><\/pre>\n<p>Veya bir CSS dosyas\u0131nda:<\/p>\n<pre><code class=\"language-css\">body {\n  background-image: url('\/images\/background.jpg');\n}<\/code><\/pre>\n<h5>Avantajlar\u0131 ve Dezavantajlar\u0131<\/h5>\n<p>*   <strong>Avantajlar\u0131:<\/strong> Basit ve h\u0131zl\u0131d\u0131r, herhangi bir yap\u0131land\u0131rma gerektirmez. Dosyalar orijinal halleriyle kal\u0131r.<br \/>\n*   <strong>Dezavantajlar\u0131:<\/strong> Gatsby&#8217;nin sundu\u011fu optimizasyonlardan (s\u0131k\u0131\u015ft\u0131rma, cache busting i\u00e7in dosya ad\u0131 hash&#8217;leme, resim optimizasyonu) yararlanamaz. Bu dosyalar i\u00e7in GraphQL sorgusu yap\u0131lamaz.<\/p>\n<h4>Bile\u015fenlere Dosyalar\u0131 \u0130\u00e7e Aktarma: Webpack&#8217;in G\u00fcc\u00fc<\/h4>\n<p><code>src<\/code> klas\u00f6r\u00fc i\u00e7indeki herhangi bir dosyay\u0131 (resimler, SVG&#8217;ler, stil dosyalar\u0131 vb.) do\u011frudan bir JavaScript veya React bile\u015fenine <code>import<\/code> etmek, Gatsby&#8217;nin Webpack entegrasyonundan tam olarak yararlanman\u0131z\u0131 sa\u011flar. Bu y\u00f6ntem, \u00f6zellikle dosya boyutunu optimize etmek, cache busting uygulamak ve dosyalar\u0131 bile\u015fen baz\u0131nda y\u00f6netmek istedi\u011finizde tercih edilir.<\/p>\n<h5>Nas\u0131l Kullan\u0131l\u0131r?<\/h5>\n<p>Bir dosyay\u0131 i\u00e7e aktard\u0131\u011f\u0131n\u0131zda, Webpack o dosyay\u0131 i\u015fler ve genellikle optimize edilmi\u015f bir s\u00fcr\u00fcm\u00fcn\u00fcn URL&#8217;sini d\u00f6nd\u00fcr\u00fcr.<\/p>\n<p><strong>Resimler i\u00e7in:<\/strong><\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport logo from '..\/assets\/logo.svg'; \/\/ src\/assets klas\u00f6r\u00fcndeki bir SVG dosyas\u0131\n\nconst Header = () => (\n  <header>\n    <img src={logo} alt=\"Uygulama Logosu\" \/>\n  <\/header>\n);\n\nexport default Header;<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>logo<\/code> de\u011fi\u015fkeni, Webpack taraf\u0131ndan i\u015flenmi\u015f <code>logo.svg<\/code> dosyas\u0131n\u0131n benzersiz bir URL&#8217;sini (genellikle bir hash ile birlikte) i\u00e7erecektir. Bu, taray\u0131c\u0131n\u0131n dosyan\u0131n yeni bir s\u00fcr\u00fcm\u00fc oldu\u011funda her zaman en son s\u00fcr\u00fcm\u00fc indirmesini sa\u011flar (cache busting).<\/p>\n<p><strong>CSS Mod\u00fclleri i\u00e7in:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/button.module.css\n.button {\n  background-color: blue;\n  color: white;\n  padding: 10px 20px;\n  border-radius: 5px;\n}<\/code><\/pre>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/Button.js\nimport React from 'react';\nimport * as styles from '.\/button.module.css';\n\nconst Button = ({ children }) => (\n  <button className={styles.button}>{children}<\/button>\n);\n\nexport default Button;<\/code><\/pre>\n<p>Bu y\u00f6ntemle, CSS stilleri yerel olarak kaps\u00fcllenir ve \u00e7ak\u0131\u015fmalar\u0131 \u00f6nler.<\/p>\n<h5>Avantajlar\u0131 ve Dezavantajlar\u0131<\/h5>\n<p>*   <strong>Avantajlar\u0131:<\/strong> Otomatik optimizasyon (s\u0131k\u0131\u015ft\u0131rma, minify), cache busting i\u00e7in dosya ad\u0131 hash&#8217;leme, mod\u00fcler yap\u0131, Webpack&#8217;in di\u011fer yeteneklerinden faydalanma (\u00f6rne\u011fin, SVG&#8217;leri React bile\u015feni olarak i\u00e7e aktarma).<br \/>\n*   <strong>Dezavantajlar\u0131:<\/strong> B\u00fcy\u00fck resim dosyalar\u0131 i\u00e7in manuel olarak <code><img><\/code> etiketi kullan\u0131ld\u0131\u011f\u0131nda, Gatsby&#8217;nin \u00f6zel resim optimizasyonlar\u0131ndan (duyarl\u0131 resimler, tembel y\u00fckleme, WebP d\u00f6n\u00fc\u015ft\u00fcrme) tam olarak yararlanamaz. Bu nedenle, resimler i\u00e7in genellikle <code>gatsby-plugin-image<\/code> kullan\u0131l\u0131r.<\/p>\n<h4>Gatsby&#8217;nin G\u00f6r\u00fcnt\u00fc Optimizasyonu: <code>gatsby-plugin-image<\/code> ile M\u00fckemmellik<\/h4>\n<p>Gatsby&#8217;nin en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, resim optimizasyonuna olan \u00f6zel yakla\u015f\u0131m\u0131d\u0131r. <code>gatsby-plugin-image<\/code> (\u00f6nceden <code>gatsby-image<\/code>), web&#8217;deki resimleri y\u00f6netmenin karma\u015f\u0131k sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015f bir eklentidir. Bu eklenti, otomatik olarak \u015funlar\u0131 yapar:<\/p>\n<p>*   <strong>Duyarl\u0131 Resimler:<\/strong> Farkl\u0131 ekran boyutlar\u0131 ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler i\u00e7in birden fazla resim boyutu olu\u015fturur.<br \/>\n*   <strong>Tembel Y\u00fckleme (Lazy Loading):<\/strong> Resimler yaln\u0131zca kullan\u0131c\u0131n\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na girdi\u011finde y\u00fcklenir, bu da ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<br \/>\n*   <strong>Resim Format\u0131 D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong> Daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 i\u00e7in WebP gibi modern formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve eski taray\u0131c\u0131lar i\u00e7in yedek formatlar sunar.<br \/>\n*   <strong>Yer Tutucular:<\/strong> Resimler y\u00fcklenirken kullan\u0131c\u0131lara d\u00fc\u015f\u00fck kaliteli bir \u00f6nizleme (blur-up veya SVG) g\u00f6sterir, bu da g\u00f6rsel bir gecikme hissini azalt\u0131r.<br \/>\n*   <strong>G\u00f6r\u00fcnt\u00fc Kalitesi Optimizasyonu:<\/strong> Resim kalitesini optimize ederken dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcr.<\/p>\n<h5>Kurulum ve Yap\u0131land\u0131rma<\/h5>\n<p><code>gatsby-plugin-image<\/code> kullanmak i\u00e7in \u00f6ncelikle gerekli paketleri y\u00fcklemeniz ve <code>gatsby-config.js<\/code> dosyan\u0131z\u0131 yap\u0131land\u0131rman\u0131z gerekir:<\/p>\n<p>1.  <strong>Paketleri Y\u00fckleyin:<\/strong><\/p>\n<pre><code class=\"language-bash\">npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem\n    # veya\n    yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem<\/code><\/pre>\n<p>2.  <strong><code>gatsby-config.js<\/code> dosyan\u0131z\u0131 yap\u0131land\u0131r\u0131n:<\/strong><\/p>\n<pre><code class=\"language-javascript\">module.exports = {\n      plugins: [\n        <code>gatsby-plugin-image<\/code>,\n        <code>gatsby-plugin-sharp<\/code>,\n        <code>gatsby-transformer-sharp<\/code>, \/\/ Resim dosyalar\u0131n\u0131 GraphQL ile sorgulanabilir hale getirir\n        {\n          resolve: <code>gatsby-source-filesystem<\/code>,\n          options: {\n            name: <code>images<\/code>,\n            path: <code>${__dirname}\/src\/images<\/code>, \/\/ Resimlerinizin bulundu\u011fu klas\u00f6r\n          },\n        },\n        \/\/ Di\u011fer eklentileriniz\n      ],\n    };<\/code><\/pre>\n<p>    <code>gatsby-source-filesystem<\/code> eklentisi, belirtilen yoldaki dosyalar\u0131 Gatsby&#8217;nin veri katman\u0131na (GraphQL) ekler, b\u00f6ylece onlar\u0131 sorgulayabilir ve <code>gatsby-plugin-image<\/code> ile kullanabilirsiniz.<\/p>\n<h5>Kullan\u0131m: <code>StaticImage<\/code> ve <code>GatsbyImage<\/code><\/h5>\n<p><code>gatsby-plugin-image<\/code> iki ana bile\u015fen sunar:<\/p>\n<p>1.  <strong><code>StaticImage<\/code>:<\/strong> Build zaman\u0131nda bilinen, de\u011fi\u015fmeyen resimler i\u00e7in kullan\u0131l\u0131r. Bu resimler do\u011frudan bile\u015fen dosyan\u0131zda i\u00e7e aktar\u0131l\u0131r.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n    import { StaticImage } from 'gatsby-plugin-image';\n\n    const MyComponent = () => (\n      <div>\n        \n        <StaticImage\n          src=\"..\/images\/hero-image.jpg\" \/\/ src\/images klas\u00f6r\u00fcndeki bir resim\n          alt=\"Harika bir manzara\"\n          placeholder=\"blurred\" \/\/ Y\u00fcklenirken bulan\u0131k bir yer tutucu g\u00f6ster\n          layout=\"fullWidth\" \/\/ Resmin geni\u015fli\u011fini %100 yapar\n          width={800} \/\/ Maksimum geni\u015flik, responsive i\u00e7in kullan\u0131l\u0131r\n          height={400} \/\/ Maksimum y\u00fckseklik\n          formats={[\"auto\", \"webp\", \"avif\"]} \/\/ Desteklenen formatlar\n        \/>\n      <\/div>\n    );\n\n    export default MyComponent;<\/code><\/pre>\n<p>    <code>StaticImage<\/code> do\u011frudan <code>src<\/code> prop&#8217;u ile dosya yolunu al\u0131r ve build zaman\u0131nda optimize edilir.<\/p>\n<p>2.  <strong><code>GatsbyImage<\/code>:<\/strong> GraphQL arac\u0131l\u0131\u011f\u0131yla dinamik olarak sorgulanan resimler i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zellikle CMS&#8217;lerden veya markdown dosyalar\u0131ndan gelen resimler i\u00e7in idealdir.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n    import { graphql } from 'gatsby';\n    import { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\n    const BlogPost = ({ data }) => {\n      const image = getImage(data.blogPost.featuredImage); \/\/ GraphQL sorgusundan gelen resim verisi\n\n      return (\n        <div>\n          \n          {image && (\n            <GatsbyImage\n              image={image}\n              alt={data.blogPost.featuredImageAlt}\n              layout=\"constrained\" \/\/ Belirli bir geni\u015flik i\u00e7inde kal\u0131r, responsive olur\n            \/>\n          )}\n          <p>{data.blogPost.content}<\/p>\n        <\/div>\n      );\n    };\n\n    export const query = graphql<code>\n      query BlogPostQuery($slug: String!) {\n        blogPost: markdownRemark(fields: { slug: { eq: $slug } }) {\n          frontmatter {\n            title\n            featuredImageAlt\n            featuredImage {\n              childImageSharp {\n                gatsbyImageData(\n                  width: 700\n                  placeholder: BLURRED\n                  formats: [AUTO, WEBP, AVIF]\n                )\n              }\n            }\n          }\n          html\n        }\n      }\n    <\/code>;\n\n    export default BlogPost;<\/code><\/pre>\n<p>    <code>GatsbyImage<\/code> kullanmak i\u00e7in, resim verilerini GraphQL sorgusu arac\u0131l\u0131\u011f\u0131yla alman\u0131z ve <code>getImage<\/code> yard\u0131mc\u0131 fonksiyonu ile <code>gatsbyImageData<\/code> format\u0131na d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekir.<\/p>\n<h5><code>gatsby-plugin-image<\/code> Prop&#8217;lar\u0131 ve Ayarlar\u0131<\/h5>\n<p>*   <strong><code>src<\/code> (StaticImage) \/ <code>image<\/code> (GatsbyImage):<\/strong> Resim kayna\u011f\u0131.<br \/>\n*   <strong><code>alt<\/code>:<\/strong> Resim i\u00e7in alternatif metin, eri\u015filebilirlik i\u00e7in zorunludur.<br \/>\n*   <strong><code>layout<\/code>:<\/strong> Resmin nas\u0131l d\u00fczenlenece\u011fini belirler (<code>constrained<\/code>, <code>fullWidth<\/code>, <code>fixed<\/code>).<br \/>\n*   <strong><code>width<\/code>, <code>height<\/code>:<\/strong> Resmin orijinal boyutlar\u0131 veya maksimum boyutlar\u0131.<br \/>\n*   <strong><code>placeholder<\/code>:<\/strong> Resim y\u00fcklenirken g\u00f6sterilecek yer tutucu (<code>blurred<\/code>, <code>dominantColor<\/code>, <code>tracedSVG<\/code>, <code>none<\/code>).<br \/>\n*   <strong><code>formats<\/code>:<\/strong> Resim i\u00e7in olu\u015fturulacak formatlar dizisi (<code>auto<\/code>, <code>webp<\/code>, <code>avif<\/code>).<br \/>\n*   <strong><code>quality<\/code>:<\/strong> Resim kalitesi (varsay\u0131lan 50).<br \/>\n*   <strong><code>transformOptions<\/code>:<\/strong> Geli\u015fmi\u015f resim d\u00f6n\u00fc\u015ft\u00fcrme se\u00e7enekleri.<\/p>\n<p><code>gatsby-plugin-image<\/code>, Gatsby projelerinde resim y\u00f6netimini devrim niteli\u011finde basitle\u015ftirir ve performans a\u00e7\u0131s\u0131ndan sekt\u00f6rdeki en iyi uygulamalar\u0131 otomatik olarak uygular.<\/p>\n<h3>Di\u011fer \u00d6nemli Statik Dosya T\u00fcrleri ve Y\u00f6netimi<\/h3>\n<p>Resimler en s\u0131k kar\u015f\u0131la\u015f\u0131lan statik dosya t\u00fcr\u00fc olsa da, Gatsby projelerinde ba\u015fka t\u00fcrde dosyalar\u0131 da y\u00f6netmeniz gerekir.<\/p>\n<h4>CSS\/Sass\/Less Dosyalar\u0131<\/h4>\n<p>Gatsby, CSS dosyalar\u0131n\u0131 Webpack arac\u0131l\u0131\u011f\u0131yla do\u011fal olarak destekler.<\/p>\n<p>*   <strong>Global Stiller:<\/strong> Proje genelinde uygulanacak stiller i\u00e7in <code>src\/styles\/global.css<\/code> (veya <code>.scss<\/code>, <code>.less<\/code>) gibi bir dosya olu\u015fturup <code>gatsby-browser.js<\/code> i\u00e7inde i\u00e7e aktarabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ gatsby-browser.js\n    import '.\/src\/styles\/global.css';<\/code><\/pre>\n<p>*   <strong>CSS Mod\u00fclleri:<\/strong> Bile\u015fen d\u00fczeyinde stillendirme ve stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek i\u00e7in CSS Mod\u00fclleri kullanabilirsiniz. Dosya ad\u0131n\u0131 <code>.module.css<\/code> (\u00f6rne\u011fin, <code>button.module.css<\/code>) olarak sonland\u0131rman\u0131z yeterlidir.<\/p>\n<pre><code class=\"language-jsx\">import * as styles from '.\/button.module.css';\n    \/\/ ...\n    <button className={styles.myButton}>T\u0131kla<\/button><\/code><\/pre>\n<p>*   <strong>Sass\/Less:<\/strong> Sass veya Less kullanmak i\u00e7in <code>gatsby-plugin-sass<\/code> veya <code>gatsby-plugin-less<\/code> gibi eklentileri y\u00fcklemeniz ve yap\u0131land\u0131rman\u0131z gerekir.<\/p>\n<pre><code class=\"language-bash\">npm install gatsby-plugin-sass node-sass<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ gatsby-config.js\n    module.exports = {\n      plugins: [<code>gatsby-plugin-sass<\/code>],\n    };<\/code><\/pre>\n<p>    Ard\u0131ndan <code>.scss<\/code> veya <code>.sass<\/code> dosyalar\u0131n\u0131 do\u011frudan i\u00e7e aktarabilirsiniz.<\/p>\n<h4>Fontlar<\/h4>\n<p>Web fontlar\u0131, sitenizin esteti\u011fi i\u00e7in \u00f6nemlidir ancak performans\u0131 da etkileyebilir.<\/p>\n<p>*   <strong>Yerel Fontlar:<\/strong> Font dosyalar\u0131n\u0131 (WOFF2, WOFF, TTF) <code>src\/fonts<\/code> gibi bir klas\u00f6re yerle\u015ftirin. Ard\u0131ndan CSS dosyan\u0131zda <code>@font-face<\/code> kural\u0131n\u0131 kullanarak i\u00e7e aktar\u0131n:<\/p>\n<pre><code class=\"language-css\">@font-face {\n      font-family: 'MyCustomFont';\n      src: url('..\/fonts\/MyCustomFont.woff2') format('woff2'),\n           url('..\/fonts\/MyCustomFont.woff') format('woff');\n      font-weight: normal;\n      font-style: normal;\n    }\n\n    body {\n      font-family: 'MyCustomFont', sans-serif;\n    }<\/code><\/pre>\n<p>    Bu font dosyalar\u0131 Webpack taraf\u0131ndan i\u015flenecek ve optimize edilecektir.<br \/>\n*   <strong>Google Fonts:<\/strong> Google Fonts gibi hizmetleri kullanmak, genellikle daha basit bir kurulum sunar. Fontlar\u0131 HTML&#8217;e <code><link><\/code> etiketiyle veya CSS&#8217;e <code>@import<\/code> kural\u0131yla dahil edebilirsiniz. Performans i\u00e7in, <code>gatsby-plugin-web-font-loader<\/code> gibi eklentileri kullanarak fontlar\u0131n y\u00fcklenmesini optimize edebilirsiniz.<\/p>\n<h4>Videolar ve Ses Dosyalar\u0131<\/h4>\n<p>B\u00fcy\u00fck medya dosyalar\u0131 genellikle <code>static<\/code> klas\u00f6r\u00fcne yerle\u015ftirilir ve do\u011frudan HTML <code><video><\/code> veya <code><audio><\/code> etiketleri ile referans verilir.<\/p>\n<pre><code class=\"language-html\"><video controls width=\"640\" height=\"360\" poster=\"\/images\/video-poster.jpg\">\n  <source src=\"\/videos\/my-awesome-video.mp4\" type=\"video\/mp4\" \/>\n  Taray\u0131c\u0131n\u0131z video etiketini desteklemiyor.\n<\/video><\/code><\/pre>\n<p>Daha k\u00fc\u00e7\u00fck medya dosyalar\u0131 veya daha fazla kontrol gerektiren durumlar i\u00e7in, bunlar\u0131 <code>src<\/code> klas\u00f6r\u00fcne yerle\u015ftirip i\u00e7e aktarabilirsiniz. <code>gatsby-plugin-react-player<\/code> gibi eklentiler, YouTube, Vimeo gibi platformlardan veya kendi bar\u0131nd\u0131rd\u0131\u011f\u0131n\u0131z dosyalardan video oynatmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4>PDF&#8217;ler ve Di\u011fer Belgeler<\/h4>\n<p>PDF dosyalar\u0131 veya di\u011fer belgeler (DOCX, XLSX vb.) genellikle <code>static<\/code> klas\u00f6r\u00fcne yerle\u015ftirilir ve do\u011frudan bir <code><a href><\/code> etiketiyle ba\u011flant\u0131 verilir:<\/p>\n<pre><code class=\"language-html\"><a href=\"\/documents\/my-report.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">\n  Raporu \u0130ndir (PDF)\n<\/a><\/code><\/pre>\n<p>E\u011fer bu belgeleri GraphQL arac\u0131l\u0131\u011f\u0131yla sorgulamak ve daha dinamik bir \u015fekilde y\u00f6netmek isterseniz, <code>gatsby-source-filesystem<\/code> ile kaynak g\u00f6sterip, <code>gatsby-transformer-json<\/code> veya <code>gatsby-transformer-remark<\/code> gibi eklentilerle i\u015fleyebilirsiniz (e\u011fer i\u00e7erikleri metin tabanl\u0131ysa).<\/p>\n<h4>JSON ve Veri Dosyalar\u0131<\/h4>\n<p>Sabit JSON verilerini do\u011frudan bile\u015fenlere i\u00e7e aktarabilirsiniz:<\/p>\n<pre><code class=\"language-json\">\/\/ src\/data\/products.json\n[\n  { \"id\": 1, \"name\": \"\u00dcr\u00fcn A\", \"price\": 100 },\n  { \"id\": 2, \"name\": \"\u00dcr\u00fcn B\", \"price\": 150 }\n]<\/code><\/pre>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport products from '..\/data\/products.json';\n\nconst ProductList = () => (\n  <ul>\n    {products.map(product => (\n      <li key={product.id}>{product.name} - {product.price} TL<\/li>\n    ))}\n  <\/ul>\n);\n\nexport default ProductList;<\/code><\/pre>\n<p>Daha b\u00fcy\u00fck veya dinamik JSON dosyalar\u0131n\u0131 GraphQL arac\u0131l\u0131\u011f\u0131yla sorgulamak i\u00e7in <code>gatsby-source-filesystem<\/code> ve <code>gatsby-transformer-json<\/code> eklentilerini kullan\u0131n:<\/p>\n<pre><code class=\"language-javascript\">\/\/ gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: <code>gatsby-source-filesystem<\/code>,\n      options: {\n        name: <code>data<\/code>,\n        path: <code>${__dirname}\/src\/data\/<\/code>,\n      },\n    },\n    <code>gatsby-transformer-json<\/code>,\n  ],\n};<\/code><\/pre>\n<p>Ard\u0131ndan GraphQL&#8217;de sorgulayabilirsiniz:<\/p>\n<pre><code class=\"language-graphql\">query MyData {\n  allProductsJson {\n    nodes {\n      id\n      name\n      price\n    }\n  }\n}<\/code><\/pre>\n<h3>Performans ve En \u0130yi Uygulamalar<\/h3>\n<p>Statik dosyalar\u0131n etkin kullan\u0131m\u0131, Gatsby sitenizin performans\u0131n\u0131 maksimize etmek i\u00e7in kritik \u00f6neme sahiptir. \u0130\u015fte dikkat etmeniz gereken baz\u0131 en iyi uygulamalar:<\/p>\n<h4>Resim Optimizasyonu Her \u015eeydir<\/h4>\n<p>*   <strong><code>gatsby-plugin-image<\/code> Kullan\u0131n:<\/strong> Bu, resim optimizasyonu i\u00e7in alt\u0131n standartt\u0131r. Manuel olarak resimleri optimize etmeye \u00e7al\u0131\u015fmak yerine bu eklentiyi kullan\u0131n.<br \/>\n*   <strong>Do\u011fru Format\u0131 Se\u00e7in:<\/strong> WebP ve AVIF gibi modern formatlar, JPG ve PNG&#8217;den \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunar. <code>gatsby-plugin-image<\/code> bunlar\u0131 otomatik olarak y\u00f6netir.<br \/>\n*   <strong>Gereksiz B\u00fcy\u00fck Resimlerden Ka\u00e7\u0131n\u0131n:<\/strong> Yaln\u0131zca ihtiyac\u0131n\u0131z olan boyutta resimler y\u00fckleyin. Bir hero resmi i\u00e7in 5000px geni\u015fli\u011finde bir resme ihtiyac\u0131n\u0131z yoksa, daha k\u00fc\u00e7\u00fck bir versiyonunu kullan\u0131n.<\/p>\n<h4>Tembel Y\u00fckleme (Lazy Loading)<\/h4>\n<p><code>gatsby-plugin-image<\/code>, tembel y\u00fcklemeyi otomatik olarak yapar. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r \u00e7\u00fcnk\u00fc resimler yaln\u0131zca kullan\u0131c\u0131 onlar\u0131 g\u00f6recek konuma kayd\u0131rd\u0131\u011f\u0131nda y\u00fcklenir. Di\u011fer medya t\u00fcrleri i\u00e7in (videolar, iframe&#8217;ler), manuel olarak <code>loading=\"lazy\"<\/code> \u00f6zelli\u011fini kullanabilir veya <code>Intersection Observer<\/code> API&#8217;sini uygulayabilirsiniz.<\/p>\n<h4>\u00d6nbellekleme (Caching)<\/h4>\n<p>*   <strong>Taray\u0131c\u0131 \u00d6nbelle\u011fi:<\/strong> Gatsby&#8217;nin Webpack entegrasyonu, i\u00e7e aktar\u0131lan dosyalar\u0131n adlar\u0131na hash&#8217;ler ekleyerek otomatik olarak cache busting sa\u011flar. Bu, taray\u0131c\u0131lar\u0131n dosyalar\u0131n de\u011fi\u015fmedi\u011fi s\u00fcrece \u00f6nbelle\u011fe al\u0131nm\u0131\u015f s\u00fcr\u00fcmlerini kullanmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong>Servis \u00c7al\u0131\u015fanlar\u0131:<\/strong> <code>gatsby-plugin-offline<\/code> eklentisi, sitenizi bir Progressive Web App (PWA) haline getirerek \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme ve an\u0131nda y\u00fckleme yetenekleri sunar. Bu, \u00f6zellikle tekrarlayan ziyaretlerde performans\u0131 art\u0131r\u0131r.<\/p>\n<h4>CDN Kullan\u0131m\u0131<\/h4>\n<p>Statik dosyalar\u0131n\u0131z\u0131 bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunmak, kullan\u0131c\u0131lar\u0131n\u0131za co\u011frafi olarak daha yak\u0131n sunuculardan dosya teslimi yaparak y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilir. Gatsby siteleri genellikle Netlify, Vercel, AWS Amplify gibi platformlarda bar\u0131nd\u0131r\u0131l\u0131r ve bu platformlar genellikle yerle\u015fik CDN hizmetleri sunar.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility)<\/h4>\n<p>*   <strong><code>alt<\/code> Metinleri:<\/strong> T\u00fcm resimler i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri sa\u011flamak, g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in \u00f6nemlidir ve SEO&#8217;ya da katk\u0131da bulunur. <code>gatsby-plugin-image<\/code> bu konuda sizi uyar\u0131r.<br \/>\n*   <strong>Anlamsal HTML:<\/strong> Medya dosyalar\u0131 i\u00e7in <code><video><\/code>, <code><audio><\/code> gibi anlamsal HTML etiketlerini kullan\u0131n.<\/p>\n<h4>Dosya Organizasyonu<\/h4>\n<p>Mant\u0131kl\u0131 bir dosya ve klas\u00f6r yap\u0131s\u0131, projenizin \u00f6l\u00e7eklenebilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r:<\/p>\n<p>*   <code>src\/images<\/code>: <code>gatsby-plugin-image<\/code> ile i\u015flenecek t\u00fcm resimler.<br \/>\n*   <code>src\/assets<\/code>: SVG&#8217;ler, k\u00fc\u00e7\u00fck simgeler, JSON verileri gibi di\u011fer i\u00e7e aktar\u0131labilir dosyalar.<br \/>\n*   <code>src\/styles<\/code>: CSS\/Sass\/Less dosyalar\u0131.<br \/>\n*   <code>src\/fonts<\/code>: Yerel olarak bar\u0131nd\u0131r\u0131lan font dosyalar\u0131.<br \/>\n*   <code>static<\/code>: <code>robots.txt<\/code>, <code>favicon.ico<\/code>, b\u00fcy\u00fck videolar\/PDF&#8217;ler gibi do\u011frudan kopyalanacak dosyalar.<\/p>\n<h4>Dosya Boyutlar\u0131 ve S\u0131k\u0131\u015ft\u0131rma<\/h4>\n<p>*   <strong>Minify ve S\u0131k\u0131\u015ft\u0131rma:<\/strong> Gatsby, build i\u015flemi s\u0131ras\u0131nda CSS ve JavaScript dosyalar\u0131n\u0131 otomatik olarak minify (k\u00fc\u00e7\u00fcltme) eder ve Gzip\/Brotli gibi s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131yla sunar.<br \/>\n*   <strong>Gereksiz Dosyalardan Ka\u00e7\u0131n\u0131n:<\/strong> Kullan\u0131lmayan resimleri, fontlar\u0131 veya di\u011fer varl\u0131klar\u0131 projenizden kald\u0131r\u0131n.<\/p>\n<h3>Geli\u015fmi\u015f Senaryolar: GraphQL ile Statik Dosyalar\u0131 Sorgulama<\/h3>\n<p>Gatsby&#8217;nin en ay\u0131rt edici \u00f6zelliklerinden biri, sitenizin t\u00fcm verilerini (statik dosyalar dahil) bir GraphQL katman\u0131 \u00fczerinden sorgulayabilme yetene\u011fidir. <code>gatsby-source-filesystem<\/code> eklentisi, dosya sisteminizdeki dosyalar\u0131 bu GraphQL katman\u0131na ekler. Bu sayede, dosyalar\u0131n yollar\u0131n\u0131, boyutlar\u0131n\u0131, t\u00fcrlerini ve hatta resimlerin optimize edilmi\u015f verilerini sorgulayabilirsiniz.<\/p>\n<h4><code>gatsby-source-filesystem<\/code> ve GraphQL<\/h4>\n<p><code>gatsby-config.js<\/code> dosyas\u0131nda <code>gatsby-source-filesystem<\/code> eklentisini yap\u0131land\u0131rd\u0131\u011f\u0131n\u0131zda, belirtilen klas\u00f6rlerdeki her dosya i\u00e7in bir <code>File<\/code> d\u00fc\u011f\u00fcm\u00fc olu\u015fturulur. Bu d\u00fc\u011f\u00fcmler, <code>allFile<\/code> veya <code>file<\/code> sorgular\u0131 arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir hale gelir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: <code>gatsby-source-filesystem<\/code>,\n      options: {\n        name: <code>uploads<\/code>, \/\/ Bu kaynak i\u00e7in bir isim\n        path: <code>${__dirname}\/content\/uploads<\/code>, \/\/ Y\u00fcklenecek dosyalar\u0131n yolu\n      },\n    },\n    {\n      resolve: <code>gatsby-source-filesystem<\/code>,\n      options: {\n        name: <code>blogImages<\/code>,\n        path: <code>${__dirname}\/src\/blog-images<\/code>,\n      },\n    },\n  ],\n};<\/code><\/pre>\n<p>Art\u0131k GraphQL&#8217;de bu dosya d\u00fc\u011f\u00fcmlerini sorgulayabilirsiniz:<\/p>\n<pre><code class=\"language-graphql\">query AllMyFiles {\n  allFile {\n    nodes {\n      relativePath\n      extension\n      size\n      publicURL # Dosyan\u0131n build sonras\u0131 URL'si\n      childImageSharp { # Sadece resim dosyalar\u0131 i\u00e7in\n        gatsbyImageData(\n          width: 300\n          placeholder: BLURRED\n          formats: [AUTO, WEBP, AVIF]\n        )\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Bu sorgu, t\u00fcm dosyalar\u0131n\u0131z\u0131n g\u00f6receli yolunu, uzant\u0131s\u0131n\u0131, boyutunu ve genel eri\u015fim URL&#8217;sini d\u00f6nd\u00fcr\u00fcr. E\u011fer dosya bir resim ise, <code>childImageSharp<\/code> alan\u0131 arac\u0131l\u0131\u011f\u0131yla optimize edilmi\u015f resim verilerine de eri\u015febilirsiniz. Bu, \u00f6zellikle bir blog g\u00f6nderisinde veya CMS&#8217;den gelen dinamik resimleri y\u00f6netirken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>Dinamik Resim Koleksiyonlar\u0131 Olu\u015fturma<\/h4>\n<p>Bir klas\u00f6rdeki t\u00fcm resimleri al\u0131p bir galeri olu\u015fturmak istedi\u011finizi varsayal\u0131m. GraphQL ile bunu kolayca yapabilirsiniz:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nconst GalleryPage = ({ data }) => (\n  <div>\n    \n    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px' }}>\n      {data.allFile.nodes.map(file => {\n        const image = getImage(file);\n        return image ? (\n          <GatsbyImage\n            key={file.id}\n            image={image}\n            alt={file.relativePath} \/\/ Alternatif metin olarak dosya yolunu kullanabiliriz\n            layout=\"constrained\"\n          \/>\n        ) : null;\n      })}\n    <\/div>\n  <\/div>\n);\n\nexport const query = graphql<code>\n  query GalleryImages {\n    allFile(filter: { sourceInstanceName: { eq: \"images\" }, extension: { in: [\"jpg\", \"png\", \"jpeg\"] } }) {\n      nodes {\n        id\n        relativePath\n        childImageSharp {\n          gatsbyImageData(\n            width: 300\n            height: 200\n            placeholder: BLURRED\n            formats: [AUTO, WEBP]\n          )\n        }\n      }\n    }\n  }\n<\/code>;\n\nexport default GalleryPage;<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>src\/images<\/code> klas\u00f6r\u00fcndeki t\u00fcm JPG, PNG resimlerini sorguluyor ve bunlar\u0131 <code>GatsbyImage<\/code> bile\u015feniyle optimize edilmi\u015f bir \u015fekilde bir galeri olarak g\u00f6r\u00fcnt\u00fcl\u00fcyoruz. <code>sourceInstanceName<\/code> filtresi, <code>gatsby-config.js<\/code> dosyas\u0131nda <code>gatsby-source-filesystem<\/code> eklentisine verdi\u011finiz <code>name<\/code> se\u00e7ene\u011fine kar\u015f\u0131l\u0131k gelir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Gatsby, statik dosyalar\u0131n y\u00f6netimini ve optimizasyonunu modern web standartlar\u0131na uygun hale getiren g\u00fc\u00e7l\u00fc bir platformdur. <code>static<\/code> klas\u00f6r\u00fc ile basit kopyalama i\u015flemlerinden, <code>gatsby-plugin-image<\/code> ile geli\u015fmi\u015f resim optimizasyonuna ve GraphQL ile dinamik dosya sorgulamaya kadar geni\u015f bir yelpazede ara\u00e7lar sunar.<\/p>\n<p>Bu makalede ele al\u0131nan y\u00f6ntemleri ve en iyi uygulamalar\u0131 takip ederek, Gatsby projelerinizde statik dosyalar\u0131 en verimli \u015fekilde kullanabilir, sitenizin performans\u0131n\u0131 art\u0131rabilir, kullan\u0131c\u0131 deneyimini iyile\u015ftirebilir ve geli\u015ftirme s\u00fcrecinizi daha keyifli hale getirebilirsiniz. Unutmay\u0131n, h\u0131zl\u0131 ve eri\u015filebilir bir web sitesi olu\u015fturman\u0131n temelinde, statik dosyalar\u0131n ak\u0131ll\u0131ca y\u00f6netimi yatmaktad\u0131r. Gatsby, bu konuda size gereken t\u00fcm g\u00fcc\u00fc ve esnekli\u011fi sunar.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi Web sitelerinin temel yap\u0131 ta\u015flar\u0131ndan biri olan statik dosyalar, modern web geli\u015ftirme s\u00fcre\u00e7lerinde performans\u0131, kullan\u0131c\u0131 deneyimini ve geli\u015ftirici verimlili\u011fini do\u011frudan etkileyen kritik unsurlard\u0131r.","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-40592","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>Gatsby&#039;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gatsby&#039;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi\" \/>\n<meta property=\"og:description\" content=\"Gatsby&#039;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi Web sitelerinin temel yap\u0131 ta\u015flar\u0131ndan biri olan statik dosyalar, modern web geli\u015ftirme s\u00fcre\u00e7lerinde performans\u0131, kullan\u0131c\u0131 deneyimini ve geli\u015ftirici verimlili\u011fini do\u011frudan etkileyen kritik unsurlard\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-27T20:40:50+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi\",\"datePublished\":\"2026-02-27T20:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\"},\"wordCount\":2637,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\",\"name\":\"Gatsby'de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-27T20:40:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi\"}]},{\"@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":"Gatsby'de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"Gatsby'de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi","og_description":"Gatsby'de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi Web sitelerinin temel yap\u0131 ta\u015flar\u0131ndan biri olan statik dosyalar, modern web geli\u015ftirme s\u00fcre\u00e7lerinde performans\u0131, kullan\u0131c\u0131 deneyimini ve geli\u015ftirici verimlili\u011fini do\u011frudan etkileyen kritik unsurlard\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-27T20:40:50+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi","datePublished":"2026-02-27T20:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/"},"wordCount":2637,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/","name":"Gatsby'de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-27T20:40:50+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-statik-dosyalari-etkili-bir-sekilde-kullanma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Gatsby&#8217;de Statik Dosyalar\u0131 Etkili Bir \u015eekilde Kullanma Rehberi"}]},{"@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\/40592","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=40592"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40592\/revisions"}],"predecessor-version":[{"id":40593,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40592\/revisions\/40593"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}