Next.js ile Statik İçerik Sunmak ve Statik İçeriği Önbelleğe Almak
23.Mar.2024Merhaba değerli okuyucular,
Next.js, modern web uygulamaları geliştirmek için popüler bir çerçevedir. Ancak, Next.js aynı zamanda statik siteler oluşturmak için de güçlü bir araçtır. Bu makalede, Next.js kullanarak nasıl statik bir site oluşturulacağını ve statik içeriğin nasıl önbelleğe alınacağını öğreneceğiz.
1) Next.js Projesi Oluştur
İlk adım olarak, Next.js projesi oluşturmanız gerekiyor. Bu işlem için terminali açın ve aşağıdaki komutu çalıştırın:
npx create-next-app statik-site
cd statik-site
Bu komut, statik-site adında bir Next.js projesi oluşturacaktır.
2) Sayfa Oluştur
Next.js'de sayfalar, pages klasörü içinde oluşturulur. Örneğin, index.js dosyası my-static-site/pages klasörü içinde oluşturularak ana sayfa oluşturulabilir. Diğer sayfalar da benzer şekilde oluşturulabilir.
3) Statik İçerik Ekle
Statik içerik, public klasörü içinde yer alır. Örneğin, public/images klasörüne görseller ekleyebilirsiniz. Bu görseller daha sonra site içinde kullanılabilir.
4) Next.js'nin "Static Export" Özelliğini Kullan
Next.js'in sağladığı next export komutu sayesinde projeyi bir statik site olarak dışa aktarabilirsiniz. Terminalde projenizin bulunduğu dizine geçerek aşağıdaki komutu çalıştırın:
npm run build && npm run export
Bu komutlar, projenizi derleyecek ve ardından statik dosyaları dışa aktaracaktır.
5) Statik İçeriği Önbelleğe Al
Statik içeriği önbelleğe almak, site performansını artırır. Bunun için Next.js'in next.config.js dosyasını düzenlemeniz gerekmektedir. Örneğin, aşağıdaki kod örneğinde statik içeriği bir saat boyunca önbelleğe alıyoruz:
module.exports = {
async rewrites() {
return [
{
source: '/:path*',
destination: '/:path*',
},
]
},
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=3600, must-revalidate',
},
],
},
]
},
}
Bu kod, tüm sayfaların ve içeriğin bir saat boyunca önbelleğe alınmasını sağlar.
Bu makalede, Next.js kullanarak nasıl bir statik site oluşturulacağını ve statik içeriğin nasıl önbelleğe alınacağını öğrendik. Artık bu bilgileri kullanarak performansı yüksek ve kullanıcı deneyimi odaklı statik siteler oluşturabilirsiniz.