Merhaba arkadaşlar, bugün başımı çok ağrıtan bir konuyu, özellikle de production'a attığımızda ortaya çıkan static dosya problemlerini konuşacağız. Next.js projemde logo, favicon, kullanım kılavuzu PDF'leri gibi dosyaları nasıl düzgün sunarım ve tarayıcı cache'ini nasıl yönetirim diye düşünürken, aslında çözüm çok basitmiş ama detayları önemliymiş. Gelin birlikte inceleyelim.
Karşılaştığım Sorun
Projemdeki bir PDF dosyası, geliştirme ortamında (localhost) sorunsuz açılıyordu. Fakat Vercel'e deploy ettikten sonra, kullanıcılar bu dosyaya tıkladığında "404 - This page could not be found" hatası alıyorlardı. İlk başta dosya yolunu yanlış yazdığımı düşündüm ama kontrol ettim, her şey doğruydu. Sorun, `public` klasörünün yapısını ve Next.js'in bu dosyaları nasıl servis ettiğini tam anlamamaktan kaynaklanıyordu. Ayrıca, her kullanıcı tıkladığında PDF'nin yeniden yüklenmesi performansı düşürüyordu.
Public Klasörü: Doğru Yapılandırma
Next.js'te `public` klasörü, projenizin kök dizininde bulunur ve içindeki her şey root (`/`) altından erişilebilir. Yani `public/kullanim-kilavuzu.pdf` dosyası, tarayıcıda `
` olarak sunulur. Buraya kadar her şey basit.
Ancak dikkat etmeniz gereken nokta, bu klasörün içine alt klasörler açarken yol yapınız. Örneğin, tüm dokümanlarınızı `public/documents/` altında toplamak isteyebilirsiniz. Bu durumda erişim yolu `/documents/dosya-adi.pdf` şeklinde olacaktır.
İşte basit bir örnek yapı:
Bu dosyalara component veya sayfa içinden şu şekilde link verebilirsiniz:
Caching Stratejisi: Performansı Artırma
İşin can alıcı noktası burası! Static dosyalarınız (özellikle resim, PDF, font) değişmediği sürece her seferinde sunucudan yeniden çekilmemeli. Bunun için Cache-Control header'ını kullanacağız. Next.js, Vercel'e deploy edildiğinde bu header'ları otomatik yapılandırır, ancak kendi sunucunuzu kullanıyorsanız (Node.js server, Nginx vs.) manuel ayarlamanız gerekebilir.
En temel ve etkili strateji, dosyaları "uzun süreli" cache'lemek. Örneğin, logo veya ikon setiniz ayda bir güncelleniyorsa, cache süresini 30 gün yapabilirsiniz. Bu sayede kullanıcı ikinci ziyaretinde dosya sunucudan değil, tarayıcı cache'inden anında yüklenir.
Vercel'de, `next.config.js` dosyası ile headers ekleyebilirsiniz:
Buradaki `immutable` direktifi, dosyanın içeriğinin asla değişmeyeceğini belirtir ve tarayıcının cache validasyonu yapmasını engelleyerek performansı daha da artırır. Ancak, sık güncellenen dosyalar için kullanmayın! Onun yerine daha kısa bir `max-age` (örn: `max-age=3600` - 1 saat) kullanabilirsiniz.
Sonuç ve Tavsiyeler
Bu yöntemlerle hem static dosyalarınızı hatasız sunabilir, hem de kullanıcı deneyimini önemli ölçüde hızlandırabilirsiniz. Benim için en büyük kazanım, `public` klasör yapısını netleştirmek ve cache header'larını projenin ihtiyacına göre agresif bir şekilde ayarlamak oldu.
Siz Next.js projelerinizde static dosyalar için farklı bir yapı veya caching taktiği kullanıyor musunuz? Ya da Vercel dışında bir platforma (AWS S3, DigitalOcean Spaces) yükleyip CDN ile mi sunuyorsunuz? Deneyimlerinizi yorumlarda paylaşırsanız çok sevinirim!
Karşılaştığım SorunProjemdeki bir PDF dosyası, geliştirme ortamında (localhost) sorunsuz açılıyordu. Fakat Vercel'e deploy ettikten sonra, kullanıcılar bu dosyaya tıkladığında "404 - This page could not be found" hatası alıyorlardı. İlk başta dosya yolunu yanlış yazdığımı düşündüm ama kontrol ettim, her şey doğruydu. Sorun, `public` klasörünün yapısını ve Next.js'in bu dosyaları nasıl servis ettiğini tam anlamamaktan kaynaklanıyordu. Ayrıca, her kullanıcı tıkladığında PDF'nin yeniden yüklenmesi performansı düşürüyordu.
Public Klasörü: Doğru YapılandırmaNext.js'te `public` klasörü, projenizin kök dizininde bulunur ve içindeki her şey root (`/`) altından erişilebilir. Yani `public/kullanim-kilavuzu.pdf` dosyası, tarayıcıda `
Bu bağlantı ziyaretçiler için gizlenmiştir. Görmek için lütfen giriş yapın veya üye olun.
Ancak dikkat etmeniz gereken nokta, bu klasörün içine alt klasörler açarken yol yapınız. Örneğin, tüm dokümanlarınızı `public/documents/` altında toplamak isteyebilirsiniz. Bu durumda erişim yolu `/documents/dosya-adi.pdf` şeklinde olacaktır.
İşte basit bir örnek yapı:
Kod:
proje-kok-dizini/
├── pages/
├── public/
│ ├── favicon.ico
│ ├── logo.png
│ └── documents/
│ ├── kullanim-kilavuzu.pdf
│ └── sozlesme.pdf
└── package.jsonBu dosyalara component veya sayfa içinden şu şekilde link verebilirsiniz:
JavaScript:
// Bir React component'inde
function IndirmeSayfasi() {
return (
<div>
<img src="/logo.png" alt="Logo" />
<a href="/documents/kullanim-kilavuzu.pdf" download>
Kılavuzu İndir (PDF)
</a>
</div>
);
}İşin can alıcı noktası burası! Static dosyalarınız (özellikle resim, PDF, font) değişmediği sürece her seferinde sunucudan yeniden çekilmemeli. Bunun için Cache-Control header'ını kullanacağız. Next.js, Vercel'e deploy edildiğinde bu header'ları otomatik yapılandırır, ancak kendi sunucunuzu kullanıyorsanız (Node.js server, Nginx vs.) manuel ayarlamanız gerekebilir.
En temel ve etkili strateji, dosyaları "uzun süreli" cache'lemek. Örneğin, logo veya ikon setiniz ayda bir güncelleniyorsa, cache süresini 30 gün yapabilirsiniz. Bu sayede kullanıcı ikinci ziyaretinde dosya sunucudan değil, tarayıcı cache'inden anında yüklenir.
Vercel'de, `next.config.js` dosyası ile headers ekleyebilirsiniz:
JavaScript:
// next.config.js
module.exports = {
async headers() {
return [
{
source: '/documents/:path', // documents altındaki tüm dosyalar
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=2592000, immutable', // 30 gün (60602430)
},
],
},
{
source: '/(.).png', // Tüm .png dosyaları
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable', // 1 yıl
},
],
},
];
},
};Buradaki `immutable` direktifi, dosyanın içeriğinin asla değişmeyeceğini belirtir ve tarayıcının cache validasyonu yapmasını engelleyerek performansı daha da artırır. Ancak, sık güncellenen dosyalar için kullanmayın! Onun yerine daha kısa bir `max-age` (örn: `max-age=3600` - 1 saat) kullanabilirsiniz.
Sonuç ve TavsiyelerBu yöntemlerle hem static dosyalarınızı hatasız sunabilir, hem de kullanıcı deneyimini önemli ölçüde hızlandırabilirsiniz. Benim için en büyük kazanım, `public` klasör yapısını netleştirmek ve cache header'larını projenin ihtiyacına göre agresif bir şekilde ayarlamak oldu.
Siz Next.js projelerinizde static dosyalar için farklı bir yapı veya caching taktiği kullanıyor musunuz? Ya da Vercel dışında bir platforma (AWS S3, DigitalOcean Spaces) yükleyip CDN ile mi sunuyorsunuz? Deneyimlerinizi yorumlarda paylaşırsanız çok sevinirim!