Gatsby’de Statik Dosyaları Etkili Bir Şekilde Kullanma Rehberi
Web sitelerinin temel yapı taşlarından biri olan statik dosyalar, modern web geliştirme süreçlerinde performansı, kullanıcı deneyimini ve geliştirici verimliliğini doğrudan etkileyen kritik unsurlardır. Gatsby gibi performans odaklı bir statik site oluşturucu (SSG) ile çalışırken, bu dosyaların doğru ve optimize edilmiş bir şekilde yönetilmesi, projenizin başarısı için hayati öneme sahiptir. Bu makalede, Gatsby projelerinizde resimlerden fontlara, CSS dosyalarından belgelere kadar çeşitli statik dosyaları nasıl etkili bir şekilde kullanabileceğinizi, Gatsby’nin sunduğu araçları ve en iyi uygulamaları detaylı bir şekilde inceleyeceğiz.
Giriş: Statik Dosyaların Web Geliştirmedeki Önemi
Statik dosyalar, bir web sitesinin sunucu tarafında işleme tabi tutulmadan doğrudan tarayıcıya gönderilen, içeriği değişmeyen dosyalardır. Bunlara genellikle şunlar dahildir:
* Resimler: JPG, PNG, SVG, GIF, WebP gibi formatlardaki görseller.
* Stil Dosyaları: CSS, Sass, Less gibi stillendirme dilleri.
* Betik Dosyaları: JavaScript dosyaları.
* Fontlar: Web sitelerinde kullanılan özel yazı tipleri (WOFF, WOFF2, TTF, OTF).
* Medya Dosyaları: Videolar (MP4, WebM), ses dosyaları (MP3, OGG).
* Belgeler ve Diğerleri: PDF’ler, TXT dosyaları, JSON verileri, favicon’lar, robots.txt gibi özel dosyalar.
Bu dosyaların verimli bir şekilde sunulması, bir web sitesinin yüklenme hızını, görsel kalitesini ve genel kullanıcı deneyimini doğrudan etkiler. Özellikle günümüzün mobil odaklı dünyasında, optimize edilmemiş statik dosyalar, kullanıcıların sitenizden hızla ayrılmasına neden olabilir. Gatsby, bu zorlukları aşmak için güçlü yerleşik optimizasyon araçları ve eklentileri sunar.
Gatsby’nin Statik Dosya Yönetimine Farklı Bir Bakış
Gatsby, bir React tabanlı statik site oluşturucu olduğundan, geliştirme sürecinde Webpack ve Babel gibi araçları arka planda kullanarak dosyaları işler. Bu, statik dosyaların yalnızca kopyalanmakla kalmayıp, aynı zamanda çeşitli optimizasyonlardan geçirilerek üretim (production) ortamı için hazırlandığı anlamına gelir. Gatsby’nin statik dosya yönetimine yaklaşımı, temelde iki ana kategoriye ayrılabilir:
1. Doğrudan Kopyalama (Passthrough): static klasörüne yerleştirilen dosyalar, build işlemi sırasında olduğu gibi public klasörüne kopyalanır. Bu dosyalar üzerinde herhangi bir Webpack işleme veya optimizasyon yapılmaz.
2. İşleme ve Optimizasyon (Processing and Optimization): src klasörü içinde veya gatsby-config.js aracılığıyla tanımlanan kaynaklardan gelen dosyalar, Webpack tarafından işlenir. Bu işlem, dosya sıkıştırma, isimlendirme (cache busting için hash ekleme), format dönüştürme ve özel optimizasyonlar (özellikle resimler için) içerebilir.
Bu iki yaklaşım, geliştiricilere esneklik sunarken, aynı zamanda performans ve geliştirici deneyimi arasında bir denge kurmalarını sağlar. Hangi yöntemin ne zaman kullanılacağını anlamak, Gatsby projelerinizde statik dosyaları en verimli şekilde kullanmanın anahtarıdır.
Statik Dosyaları Kullanma Yöntemleri
Gatsby’de statik dosyaları kullanmak için birkaç temel yöntem bulunmaktadır. Her yöntemin kendine özgü avantajları ve kullanım senaryoları vardır.
static Klasörü: Doğrudan Kopyalama Mekanizması
Gatsby projelerinde static adında özel bir klasör bulunur (proje kök dizininde, src klasörünün yanında). Bu klasöre yerleştirdiğiniz tüm dosyalar, Gatsby build işlemi sırasında herhangi bir değişiklik yapılmadan doğrudan public klasörünün kök dizinine kopyalanır. Bu, dosyalarınıza web sitesinin kök dizininden erişilebileceği anlamına gelir.
Ne Zaman Kullanılmalı?
* İşlenmeye İhtiyaç Duymayan Dosyalar: Favicon’lar (favicon.ico), robots.txt, sitemap.xml, manifest.json gibi dosyalar.
* Büyük Medya Dosyaları: Çok büyük video veya ses dosyaları gibi, Webpack tarafından işlenmesi zaman alacak veya anlamsız olacak dosyalar.
* Üçüncü Taraf Kütüphaneler: CDN’den yüklenmeyen ve doğrudan dağıtılması gereken özel JavaScript kütüphaneleri.
* Özel HTML Dosyaları: Doğrudan erişilmesi gereken özel HTML sayfaları (örneğin, doğrulama dosyaları).
Nasıl Kullanılır?
static klasöründeki bir dosyaya, web sitesinin kök dizinine göre bir yol kullanarak erişilir. Örneğin, static/images/logo.png dosyasını kullanmak için HTML’de /images/logo.png yolunu belirtirsiniz:
Veya bir CSS dosyasında:
body {
background-image: url('/images/background.jpg');
}Avantajları ve Dezavantajları
* Avantajları: Basit ve hızlıdır, herhangi bir yapılandırma gerektirmez. Dosyalar orijinal halleriyle kalır.
* Dezavantajları: Gatsby’nin sunduğu optimizasyonlardan (sıkıştırma, cache busting için dosya adı hash’leme, resim optimizasyonu) yararlanamaz. Bu dosyalar için GraphQL sorgusu yapılamaz.
Bileşenlere Dosyaları İçe Aktarma: Webpack’in Gücü
src klasörü içindeki herhangi bir dosyayı (resimler, SVG’ler, stil dosyaları vb.) doğrudan bir JavaScript veya React bileşenine import etmek, Gatsby’nin Webpack entegrasyonundan tam olarak yararlanmanızı sağlar. Bu yöntem, özellikle dosya boyutunu optimize etmek, cache busting uygulamak ve dosyaları bileşen bazında yönetmek istediğinizde tercih edilir.
Nasıl Kullanılır?
Bir dosyayı içe aktardığınızda, Webpack o dosyayı işler ve genellikle optimize edilmiş bir sürümünün URL’sini döndürür.
Resimler için:
import React from 'react';
import logo from '../assets/logo.svg'; // src/assets klasöründeki bir SVG dosyası
const Header = () => (
);
export default Header;Bu örnekte, logo değişkeni, Webpack tarafından işlenmiş logo.svg dosyasının benzersiz bir URL’sini (genellikle bir hash ile birlikte) içerecektir. Bu, tarayıcının dosyanın yeni bir sürümü olduğunda her zaman en son sürümü indirmesini sağlar (cache busting).
CSS Modülleri için:
// src/components/button.module.css
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}// src/components/Button.js
import React from 'react';
import * as styles from './button.module.css';
const Button = ({ children }) => (
);
export default Button;Bu yöntemle, CSS stilleri yerel olarak kapsüllenir ve çakışmaları önler.
Avantajları ve Dezavantajları
* Avantajları: Otomatik optimizasyon (sıkıştırma, minify), cache busting için dosya adı hash’leme, modüler yapı, Webpack’in diğer yeteneklerinden faydalanma (örneğin, SVG’leri React bileşeni olarak içe aktarma).
* Dezavantajları: Büyük resim dosyaları için manuel olarak gatsby-plugin-image kullanılır.
Gatsby’nin Görüntü Optimizasyonu: gatsby-plugin-image ile Mükemmellik
Gatsby’nin en güçlü özelliklerinden biri, resim optimizasyonuna olan özel yaklaşımıdır. gatsby-plugin-image (önceden gatsby-image), web’deki resimleri yönetmenin karmaşık sorunlarını çözmek için tasarlanmış bir eklentidir. Bu eklenti, otomatik olarak şunları yapar:
* Duyarlı Resimler: Farklı ekran boyutları ve çözünürlükler için birden fazla resim boyutu oluşturur.
* Tembel Yükleme (Lazy Loading): Resimler yalnızca kullanıcının görüntü alanına girdiğinde yüklenir, bu da başlangıç yükleme süresini önemli ölçüde azaltır.
* Resim Formatı Dönüştürme: Daha küçük dosya boyutları için WebP gibi modern formatlara dönüştürür ve eski tarayıcılar için yedek formatlar sunar.
* Yer Tutucular: Resimler yüklenirken kullanıcılara düşük kaliteli bir önizleme (blur-up veya SVG) gösterir, bu da görsel bir gecikme hissini azaltır.
* Görüntü Kalitesi Optimizasyonu: Resim kalitesini optimize ederken dosya boyutunu küçültür.
Kurulum ve Yapılandırma
gatsby-plugin-image kullanmak için öncelikle gerekli paketleri yüklemeniz ve gatsby-config.js dosyanızı yapılandırmanız gerekir:
1. Paketleri Yükleyin:
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem
# veya
yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem2. gatsby-config.js dosyanızı yapılandırın:
module.exports = {
plugins: [
gatsby-plugin-image,
gatsby-plugin-sharp,
gatsby-transformer-sharp, // Resim dosyalarını GraphQL ile sorgulanabilir hale getirir
{
resolve: gatsby-source-filesystem,
options: {
name: images,
path: ${__dirname}/src/images, // Resimlerinizin bulunduğu klasör
},
},
// Diğer eklentileriniz
],
}; gatsby-source-filesystem eklentisi, belirtilen yoldaki dosyaları Gatsby’nin veri katmanına (GraphQL) ekler, böylece onları sorgulayabilir ve gatsby-plugin-image ile kullanabilirsiniz.
Kullanım: StaticImage ve GatsbyImage
gatsby-plugin-image iki ana bileşen sunar:
1. StaticImage: Build zamanında bilinen, değişmeyen resimler için kullanılır. Bu resimler doğrudan bileşen dosyanızda içe aktarılır.
import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
const MyComponent = () => (
StaticImage doğrudan src prop’u ile dosya yolunu alır ve build zamanında optimize edilir.
2. GatsbyImage: GraphQL aracılığıyla dinamik olarak sorgulanan resimler için kullanılır. Bu, özellikle CMS’lerden veya markdown dosyalarından gelen resimler için idealdir.
import React from 'react';
import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
const BlogPost = ({ data }) => {
const image = getImage(data.blogPost.featuredImage); // GraphQL sorgusundan gelen resim verisi
return (
{image && (
{data.blogPost.content}
);
};
export const query = graphql
query BlogPostQuery($slug: String!) {
blogPost: markdownRemark(fields: { slug: { eq: $slug } }) {
frontmatter {
title
featuredImageAlt
featuredImage {
childImageSharp {
gatsbyImageData(
width: 700
placeholder: BLURRED
formats: [AUTO, WEBP, AVIF]
)
}
}
}
html
}
}
;
export default BlogPost; GatsbyImage kullanmak için, resim verilerini GraphQL sorgusu aracılığıyla almanız ve getImage yardımcı fonksiyonu ile gatsbyImageData formatına dönüştürmeniz gerekir.
gatsby-plugin-image Prop’ları ve Ayarları
* src (StaticImage) / image (GatsbyImage): Resim kaynağı.
* alt: Resim için alternatif metin, erişilebilirlik için zorunludur.
* layout: Resmin nasıl düzenleneceğini belirler (constrained, fullWidth, fixed).
* width, height: Resmin orijinal boyutları veya maksimum boyutları.
* placeholder: Resim yüklenirken gösterilecek yer tutucu (blurred, dominantColor, tracedSVG, none).
* formats: Resim için oluşturulacak formatlar dizisi (auto, webp, avif).
* quality: Resim kalitesi (varsayılan 50).
* transformOptions: Gelişmiş resim dönüştürme seçenekleri.
gatsby-plugin-image, Gatsby projelerinde resim yönetimini devrim niteliğinde basitleştirir ve performans açısından sektördeki en iyi uygulamaları otomatik olarak uygular.
Diğer Önemli Statik Dosya Türleri ve Yönetimi
Resimler en sık karşılaşılan statik dosya türü olsa da, Gatsby projelerinde başka türde dosyaları da yönetmeniz gerekir.
CSS/Sass/Less Dosyaları
Gatsby, CSS dosyalarını Webpack aracılığıyla doğal olarak destekler.
* Global Stiller: Proje genelinde uygulanacak stiller için src/styles/global.css (veya .scss, .less) gibi bir dosya oluşturup gatsby-browser.js içinde içe aktarabilirsiniz:
// gatsby-browser.js
import './src/styles/global.css';* CSS Modülleri: Bileşen düzeyinde stillendirme ve stil çakışmalarını önlemek için CSS Modülleri kullanabilirsiniz. Dosya adını .module.css (örneğin, button.module.css) olarak sonlandırmanız yeterlidir.
import * as styles from './button.module.css';
// ...
* Sass/Less: Sass veya Less kullanmak için gatsby-plugin-sass veya gatsby-plugin-less gibi eklentileri yüklemeniz ve yapılandırmanız gerekir.
npm install gatsby-plugin-sass node-sass// gatsby-config.js
module.exports = {
plugins: [gatsby-plugin-sass],
}; Ardından .scss veya .sass dosyalarını doğrudan içe aktarabilirsiniz.
Fontlar
Web fontları, sitenizin estetiği için önemlidir ancak performansı da etkileyebilir.
* Yerel Fontlar: Font dosyalarını (WOFF2, WOFF, TTF) src/fonts gibi bir klasöre yerleştirin. Ardından CSS dosyanızda @font-face kuralını kullanarak içe aktarın:
@font-face {
font-family: 'MyCustomFont';
src: url('../fonts/MyCustomFont.woff2') format('woff2'),
url('../fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
} Bu font dosyaları Webpack tarafından işlenecek ve optimize edilecektir.
* Google Fonts: Google Fonts gibi hizmetleri kullanmak, genellikle daha basit bir kurulum sunar. Fontları HTML’e etiketiyle veya CSS’e @import kuralıyla dahil edebilirsiniz. Performans için, gatsby-plugin-web-font-loader gibi eklentileri kullanarak fontların yüklenmesini optimize edebilirsiniz.
Videolar ve Ses Dosyaları
Büyük medya dosyaları genellikle static klasörüne yerleştirilir ve doğrudan HTML veya etiketleri ile referans verilir.
Daha küçük medya dosyaları veya daha fazla kontrol gerektiren durumlar için, bunları src klasörüne yerleştirip içe aktarabilirsiniz. gatsby-plugin-react-player gibi eklentiler, YouTube, Vimeo gibi platformlardan veya kendi barındırdığınız dosyalardan video oynatmayı kolaylaştırır.
PDF’ler ve Diğer Belgeler
PDF dosyaları veya diğer belgeler (DOCX, XLSX vb.) genellikle static klasörüne yerleştirilir ve doğrudan bir etiketiyle bağlantı verilir:
Raporu İndir (PDF)
Eğer bu belgeleri GraphQL aracılığıyla sorgulamak ve daha dinamik bir şekilde yönetmek isterseniz, gatsby-source-filesystem ile kaynak gösterip, gatsby-transformer-json veya gatsby-transformer-remark gibi eklentilerle işleyebilirsiniz (eğer içerikleri metin tabanlıysa).
JSON ve Veri Dosyaları
Sabit JSON verilerini doğrudan bileşenlere içe aktarabilirsiniz:
// src/data/products.json
[
{ "id": 1, "name": "Ürün A", "price": 100 },
{ "id": 2, "name": "Ürün B", "price": 150 }
]import React from 'react';
import products from '../data/products.json';
const ProductList = () => (
{products.map(product => (
- {product.name} - {product.price} TL
))}
);
export default ProductList;Daha büyük veya dinamik JSON dosyalarını GraphQL aracılığıyla sorgulamak için gatsby-source-filesystem ve gatsby-transformer-json eklentilerini kullanın:
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: gatsby-source-filesystem,
options: {
name: data,
path: ${__dirname}/src/data/,
},
},
gatsby-transformer-json,
],
};Ardından GraphQL’de sorgulayabilirsiniz:
query MyData {
allProductsJson {
nodes {
id
name
price
}
}
}Performans ve En İyi Uygulamalar
Statik dosyaların etkin kullanımı, Gatsby sitenizin performansını maksimize etmek için kritik öneme sahiptir. İşte dikkat etmeniz gereken bazı en iyi uygulamalar:
Resim Optimizasyonu Her Şeydir
* gatsby-plugin-image Kullanın: Bu, resim optimizasyonu için altın standarttır. Manuel olarak resimleri optimize etmeye çalışmak yerine bu eklentiyi kullanın.
* Doğru Formatı Seçin: WebP ve AVIF gibi modern formatlar, JPG ve PNG’den çok daha küçük dosya boyutları sunar. gatsby-plugin-image bunları otomatik olarak yönetir.
* Gereksiz Büyük Resimlerden Kaçının: Yalnızca ihtiyacınız olan boyutta resimler yükleyin. Bir hero resmi için 5000px genişliğinde bir resme ihtiyacınız yoksa, daha küçük bir versiyonunu kullanın.
Tembel Yükleme (Lazy Loading)
gatsby-plugin-image, tembel yüklemeyi otomatik olarak yapar. Bu, sayfa yükleme hızını artırır çünkü resimler yalnızca kullanıcı onları görecek konuma kaydırdığında yüklenir. Diğer medya türleri için (videolar, iframe’ler), manuel olarak loading="lazy" özelliğini kullanabilir veya Intersection Observer API’sini uygulayabilirsiniz.
Önbellekleme (Caching)
* Tarayıcı Önbelleği: Gatsby’nin Webpack entegrasyonu, içe aktarılan dosyaların adlarına hash’ler ekleyerek otomatik olarak cache busting sağlar. Bu, tarayıcıların dosyaların değişmediği sürece önbelleğe alınmış sürümlerini kullanmasını sağlar.
* Servis Çalışanları: gatsby-plugin-offline eklentisi, sitenizi bir Progressive Web App (PWA) haline getirerek çevrimdışı önbellekleme ve anında yükleme yetenekleri sunar. Bu, özellikle tekrarlayan ziyaretlerde performansı artırır.
CDN Kullanımı
Statik dosyalarınızı bir İçerik Dağıtım Ağı (CDN) üzerinden sunmak, kullanıcılarınıza coğrafi olarak daha yakın sunuculardan dosya teslimi yaparak yükleme sürelerini önemli ölçüde azaltabilir. Gatsby siteleri genellikle Netlify, Vercel, AWS Amplify gibi platformlarda barındırılır ve bu platformlar genellikle yerleşik CDN hizmetleri sunar.
Erişilebilirlik (Accessibility)
* alt Metinleri: Tüm resimler için açıklayıcı alt metinleri sağlamak, görme engelli kullanıcılar için önemlidir ve SEO’ya da katkıda bulunur. gatsby-plugin-image bu konuda sizi uyarır.
* Anlamsal HTML: Medya dosyaları için , gibi anlamsal HTML etiketlerini kullanın.
Dosya Organizasyonu
Mantıklı bir dosya ve klasör yapısı, projenizin ölçeklenebilirliğini ve bakımını kolaylaştırır:
* src/images: gatsby-plugin-image ile işlenecek tüm resimler.
* src/assets: SVG’ler, küçük simgeler, JSON verileri gibi diğer içe aktarılabilir dosyalar.
* src/styles: CSS/Sass/Less dosyaları.
* src/fonts: Yerel olarak barındırılan font dosyaları.
* static: robots.txt, favicon.ico, büyük videolar/PDF’ler gibi doğrudan kopyalanacak dosyalar.
Dosya Boyutları ve Sıkıştırma
* Minify ve Sıkıştırma: Gatsby, build işlemi sırasında CSS ve JavaScript dosyalarını otomatik olarak minify (küçültme) eder ve Gzip/Brotli gibi sıkıştırma algoritmalarıyla sunar.
* Gereksiz Dosyalardan Kaçının: Kullanılmayan resimleri, fontları veya diğer varlıkları projenizden kaldırın.
Gelişmiş Senaryolar: GraphQL ile Statik Dosyaları Sorgulama
Gatsby’nin en ayırt edici özelliklerinden biri, sitenizin tüm verilerini (statik dosyalar dahil) bir GraphQL katmanı üzerinden sorgulayabilme yeteneğidir. gatsby-source-filesystem eklentisi, dosya sisteminizdeki dosyaları bu GraphQL katmanına ekler. Bu sayede, dosyaların yollarını, boyutlarını, türlerini ve hatta resimlerin optimize edilmiş verilerini sorgulayabilirsiniz.
gatsby-source-filesystem ve GraphQL
gatsby-config.js dosyasında gatsby-source-filesystem eklentisini yapılandırdığınızda, belirtilen klasörlerdeki her dosya için bir File düğümü oluşturulur. Bu düğümler, allFile veya file sorguları aracılığıyla erişilebilir hale gelir.
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: gatsby-source-filesystem,
options: {
name: uploads, // Bu kaynak için bir isim
path: ${__dirname}/content/uploads, // Yüklenecek dosyaların yolu
},
},
{
resolve: gatsby-source-filesystem,
options: {
name: blogImages,
path: ${__dirname}/src/blog-images,
},
},
],
};Artık GraphQL’de bu dosya düğümlerini sorgulayabilirsiniz:
query AllMyFiles {
allFile {
nodes {
relativePath
extension
size
publicURL # Dosyanın build sonrası URL'si
childImageSharp { # Sadece resim dosyaları için
gatsbyImageData(
width: 300
placeholder: BLURRED
formats: [AUTO, WEBP, AVIF]
)
}
}
}
}Bu sorgu, tüm dosyalarınızın göreceli yolunu, uzantısını, boyutunu ve genel erişim URL’sini döndürür. Eğer dosya bir resim ise, childImageSharp alanı aracılığıyla optimize edilmiş resim verilerine de erişebilirsiniz. Bu, özellikle bir blog gönderisinde veya CMS’den gelen dinamik resimleri yönetirken çok kullanışlıdır.
Dinamik Resim Koleksiyonları Oluşturma
Bir klasördeki tüm resimleri alıp bir galeri oluşturmak istediğinizi varsayalım. GraphQL ile bunu kolayca yapabilirsiniz:
import React from 'react';
import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
const GalleryPage = ({ data }) => (
{data.allFile.nodes.map(file => {
const image = getImage(file);
return image ? (
query GalleryImages {
allFile(filter: { sourceInstanceName: { eq: "images" }, extension: { in: ["jpg", "png", "jpeg"] } }) {
nodes {
id
relativePath
childImageSharp {
gatsbyImageData(
width: 300
height: 200
placeholder: BLURRED
formats: [AUTO, WEBP]
)
}
}
}
}
;
export default GalleryPage;Bu örnekte, src/images klasöründeki tüm JPG, PNG resimlerini sorguluyor ve bunları GatsbyImage bileşeniyle optimize edilmiş bir şekilde bir galeri olarak görüntülüyoruz. sourceInstanceName filtresi, gatsby-config.js dosyasında gatsby-source-filesystem eklentisine verdiğiniz name seçeneğine karşılık gelir.
Sonuç
Gatsby, statik dosyaların yönetimini ve optimizasyonunu modern web standartlarına uygun hale getiren güçlü bir platformdur. static klasörü ile basit kopyalama işlemlerinden, gatsby-plugin-image ile gelişmiş resim optimizasyonuna ve GraphQL ile dinamik dosya sorgulamaya kadar geniş bir yelpazede araçlar sunar.
Bu makalede ele alınan yöntemleri ve en iyi uygulamaları takip ederek, Gatsby projelerinizde statik dosyaları en verimli şekilde kullanabilir, sitenizin performansını artırabilir, kullanıcı deneyimini iyileştirebilir ve geliştirme sürecinizi daha keyifli hale getirebilirsiniz. Unutmayın, hızlı ve erişilebilir bir web sitesi oluşturmanın temelinde, statik dosyaların akıllıca yönetimi yatmaktadır. Gatsby, bu konuda size gereken tüm gücü ve esnekliği sunar.