Production Checklist

Next.js uygulamanızı üretime almadan önce, en iyi kullanıcı deneyimi, performans ve güvenlik için uygulamayı düşünmeniz gereken bazı optimizasyonlar ve modeller vardır.

Bu sayfa, uygulamanızı oluştururken, üretime geçmeden önce ve dağıtımdan sonra referans olarak kullanabileceğiniz en iyi uygulamaların yanı sıra bilmeniz gereken otomatik Next.js optimizasyonlarını sunar.

Automatic optimizations

Bu Next.js optimizasyonları varsayılan olarak etkindir ve yapılandırma gerektirmez:

Kod bölme :Next.js, uygulama kodunuzu sayfalara göre otomatik olarak kod böler. Bu, gezinme sırasında yalnızca geçerli sayfa için gereken kodun yükleneceği anlamına gelir. Uygun olduğunda üçüncü taraf kütüphanelerini tembel yüklemeyi de düşünebilirsiniz.
Prefetching: Yeni bir rotaya giden bir bağlantı kullanıcının görüntü alanına girdiğinde Next.js rotayı arka planda prefetches eder. Bu, yeni rotalarda gezinmeyi neredeyse anında yapar. Uygun olduğu durumlarda ön getirmeyi devre dışı bırakabilirsiniz.
Otomatik Statik Optimizasyon:Next.js, engelleyici veri gereksinimi yoksa bir sayfanın statik olduğunu (önceden oluşturulabilir) otomatik olarak belirler. Optimize edilmiş sayfalar önbelleğe alınabilir ve son kullanıcıya birden fazla CDN konumundan sunulabilir. Uygun olduğunda Sunucu Tarafı Oluşturmayı seçebilirsiniz.

Bu varsayılanlar, uygulamanızın performansını artırmayı ve her ağ isteğinde aktarılan veri miktarını ve maliyetini azaltmayı amaçlar.

During development

Uygulamanızı oluştururken, en iyi performansı ve kullanıcı deneyimini sağlamak için aşağıdaki özellikleri kullanmanızı öneririz:

Routing and rendering

<Link> bileşeni :İstemci tarafında gezinme ve ön-getirme için <Link> bileşeninikullanın.
Özel Hatalar: 500 ve 404 hatalarınızarif bir şekilde işleyin

Data fetching and caching

API Rotaları: Arka uç kaynaklarınıza erişmek için Rota İşleyicileri kullanın ve hassas sırların istemciye ifşa edilmesini önleyin.
VeriÖnbelleğe Alma :Veri taleplerinizin önbelleğe alınıp alınmadığını doğrulayın ve uygun olduğunda önbelleğe almayı tercih edin. getStaticProps adresini kullanmayan isteklerin uygun yerlerde önbelleğe alındığından emin olun.
Artımlı Statik Yenileme :Statik sayfaları oluşturulduktan sonra sitenizin tamamını yeniden oluşturmadan güncellemek için Artımlı Statik Yenileme özelliğini kullanın.
Statik Görüntüler: Görüntüler gibi uygulamanızın statik varlıklarını otomatik olarak önbelleğe almak için public dizinini kullanın.

UI and accessibility

Yazı TipiModülü: Yazı tipi dosyalarınızı diğer statik varlıklarla birlikte otomatik olarak barındıran, harici ağ isteklerini kaldıran ve düzen kaymasını azaltan Yazı Tipi Modülünü kullanarak yazı tiplerini optimize edin .
<Image> Bileşen:Görüntüleri otomatik olarak optimize eden, düzen kaymasını önleyen ve WebP veya AVIF gibi modern formatlarda sunan Görüntü Bileşenini kullanarak görüntüleri optimize edin.
<Script> Bileşen:Komut dosyalarını otomatik olarak erteleyen ve ana iş parçacığını engellemelerini önleyen Komut Dosyası Bileşenini kullanarak üçüncü taraf komut dosyalarını optimize edin.
ESLint: Erişilebilirlik sorunlarını erkenden yakalamak için yerleşik eslint-plugin-jsx-a11y eklentisini kullanın.

Security

Ortam Değişkenleri: .env.* dosyalarınızın .gitignore adresine eklendiğinden ve yalnızca genel değişkenlerin NEXT_PUBLIC_ ile öneklendiğinden emin olun.
İçerik Güvenliği Politikası:Uygulamanızı siteler arası komut dosyası oluşturma, clickjacking ve diğer kod enjeksiyon saldırıları gibi çeşitli güvenlik tehditlerine karşı korumak için bir İçerik Güvenliği Politikası eklemeyi düşünün.

Metadata and SEO

<Head> Bileşen:Sayfa başlıkları, açıklamalar ve daha fazlasını eklemek için next/head bileşenini kullanın.

Type safety

TypeScript ve TS Eklentisi: Daha iyi tip güvenliği ve hataları erken yakalamanıza yardımcı olması için TypeScript ve TypeScript eklentisini kullanın.

Üretime geçmeden önce, uygulamanızı yerel olarak derlemek ve derleme hatalarını yakalamak için next build adresini çalıştırabilir, ardından uygulamanızın performansını üretim benzeri bir ortamda ölçmek için next start adresini çalıştırabilirsiniz.

Core Web Vitals

Lighthouse: Kullanıcılarınızın sitenizi nasıl deneyimleyeceğini daha iyi anlamak ve iyileştirme alanlarını belirlemek için lighthouse'u gizli olarak çalıştırın. Bu simüle edilmiş bir testtir ve saha verilerine (Core Web Vitals gibi) bakmakla eşleştirilmelidir.

Analyzing bundles

JavaScript paketlerinizin boyutunu analiz etmek ve uygulamanızın performansını etkileyebilecek büyük modülleri ve bağımlılıkları belirlemek için @next/bundle-analyzer eklentisini kullanın.

Ayrıca, aşağıdaki araçlar uygulamanıza yeni bağımlılıklar eklemenin etkisini anlamanızı sağlayabilir:

After deployment

Uygulamanızı nerede dağıttığınıza bağlı olarak, uygulamanızın performansını izlemenize ve iyileştirmenize yardımcı olacak ek araçlara ve entegrasyonlara erişiminiz olabilir.

Vercel dağıtımları için aşağıdakileri öneriyoruz:

Analytics: Tekil ziyaretçi sayısı, sayfa görüntülemeleri ve daha fazlası dahil olmak üzere uygulamanızın trafiğini anlamanıza yardımcı olacak yerleşik bir analitik gösterge tablosu.
Speed Insights: Ziyaretçi verilerine dayalı gerçek dünya performans bilgileri, web sitenizin sahada nasıl performans gösterdiğine dair pratik bir görünüm sunar.
Günlük kaydı: Sorunları ayıklamanıza ve uygulamanızı üretimde izlemenize yardımcı olacak Çalışma Zamanı ve Etkinlik günlükleri. Alternatif olarak, üçüncü taraf araç ve hizmetlerin bir listesi için entegrasyonlar sayfasınabakın.

Bilmekte fayda var:

Web sitesi performansını iyileştirmeye yönelik ayrıntılı stratejiler de dahil olmak üzere Vercel'de üretim dağıtımlarına yönelik en iyi uygulamaları kapsamlı bir şekilde anlamak için Vercel Üretim Kontrol Listesine bakın.

Bu önerilere uymanız, kullanıcılarınız için daha hızlı, daha güvenilir ve güvenli bir uygulama oluşturmanıza yardımcı olacaktır.