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:

SunucuBileşenleri: Next.js varsayılan olarak Sunucu Bileşenlerini kullanır. Sunucu Bileşenleri sunucuda çalışır ve JavaScript'in istemcide işlenmesini gerektirmez. Bu nedenle, istemci tarafı JavaScript paketlerinizin boyutu üzerinde hiçbir etkileri yoktur. Daha sonra etkileşim için gerektiğinde İstemci Bileşe nlerini kullanabilirsiniz.
Kod bölme: Sunucu Bileşenleri, rota segmentlerine göre otomatik kod bölmeyi etkinleştirir. Uygun olduğunda İstemci Bileşenlerini ve üçü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.
Statik Render: Next.js, Sunucu ve İstemci Bileşenlerini derleme sırasında sunucuda statik olarak işler ve uygulamanızın performansını artırmak için işlenen sonucu önbelleğe alır. Uygun olduğunda belirli rotalar için Dinamik Oluşturmayı seçebilirsiniz.
Önbelleğe alma: Next.js, sunucunuza, veritabanınıza ve arka uç hizmetlerinize yapılan ağ isteklerinin sayısını azaltmak için veri isteklerini, Sunucu ve İstemci Bileşenlerinin işlenmiş sonuçlarını, statik varlıkları ve daha fazlasını önbelleğe alır. Uygun olduğunda önbelleğe almayı devre dışı bırakabilirsiniz.

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

Düzenler: Kullanıcı arayüzünü sayfalar arasında paylaşmak ve gezinme sırasında kısmi oluşturmayı etkinleştirmek için düzenleri kullanın.
<Link> bileşenini kullanın: İstemci tarafında gezinme ve ön-getirme için <Link> bileşenini kullanın.
Hata İşleme: Özel hata sayfaları oluşturarak üretimde tümünü yakalama hat alarını ve 404 hat alarını zarif bir şekilde işleyin.
Kompozisyon Kalıpları: Sunucu ve İstemci Bileşenleri için önerilen kompozisyon modellerini izleyin ve istemci tarafı JavaScript paketinizi gereksiz yere artırmamak için "use client" sınırlarınızın yerleşimini kontrol edin.
Dinamik İşlevler: Aşağıdaki gibi dinamik fonksiyonların cookies() ve searchParams prop tüm rotayı Dinamik Oluşturmaya (veya Kök Düzende kullanılıyorsa tüm uygulamanızı) tercih edecektir. Dinamik işlev kullanımının kasıtlı olduğundan emin olun ve uygun olduğunda bunları <Suspense> sınırlarına sarın.

Bilmekte fayda var: Kısmi Ön Oluşturma (Deneysel), tüm rotayı dinamik oluşturmaya seçmeden bir rotanın bazı bölümlerinin dinamik olmasına izin verir.

Data fetching and caching

SunucuBileşenleri: Sunucu Bileşenlerini kullanarak sunucuda veri getirmenin avantajlarından yararlanın.
Rota İşleyicileri: İstemci Bileşenlerinden arka uç kaynaklarınıza erişmek için Rota İşleyicilerini kullanın. Ancak ek bir sunucu isteğinden kaçınmak için Sunucu Bileşenlerinden Rota İşleyicileri çağırmayın.
Akış: UI'yi sunucudan istemciye aşamalı olarak göndermek için Loading UI ve React Suspense'i kullanın ve veri getirilirken tüm rotanın engellenmesini önleyin.
Paralel Veri Getirme: Uygun olduğunda verileri paralel olarak getirerek ağ şelalelerini azaltın. Ayrıca, uygun olduğunda verileri önceden yüklemeyi düşünün.
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. fetch adresini kullanmayan isteklerin önbelleğe alındığından emin olun.
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

Formlar ve Doğrulama: Form gönderimleri, sunucu tarafı doğrulama ve hataları işlemek için Sunucu Eylemlerini kullanın.

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

Lekeleme: Veri nesnelerini ve/veya belirli değerleri lekeleyerek hassas verilerin istemciye ifşa edilmesini önleyin.
SunucuEylemleri: Kullanıcıların Sunucu Eylemlerini çağırma yetkisine sahip olduğundan emin olun. Önerilen güvenlik uygulamalarını gözden geçirin.

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

Meta Veri API'si: Sayfa başlıkları, açıklamalar ve daha fazlasını ekleyerek uygulamanızın Arama Motoru Optimizasyonunu (SEO) iyileştirmek için Metadata API'sini kullanın.
Açık Grafik (OG) görüntüleri: Uygulamanızı sosyal paylaşıma hazırlamak için OG görüntüleri oluşturun.
Site Haritaları ve Robotlar: Site haritaları ve robot dosyaları oluşturarak Arama Motorlarının sayfalarınızı taramasına ve dizine eklemesine yardımcı olun.

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 deniz fenerini gizli olarak çalıştırın. Bu simüle edilmiş bir testtir ve saha verilerine (Core Web Vitals gibi) bakmakla eşleştirilmelidir.

useReportWebVitals kanca: Core Web Vitals verilerini analiz araçlarına göndermek için bu kancayı kullanın.

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 analiz panosu.
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ı: Sorunlarda hata 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ına bakın.

Bildiğim iyi oldu:

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.