Üretimde Kullandığımız 10 Next.js Performans İpucu

Neden performans önemlidir?

Her 100ms gecikme, dönüşüm kaybına yol açar. Softween olarak teslim ettiğimiz her projede Lighthouse 100 hedefliyoruz.

1. Mümkün olduğunda statik export kullanın

Next.js output: "export", derleme zamanında saf HTML üretir. Sunucu gerektirmez, Cloudflare Pages üzerinden anlık edge dağıtımı sağlar.

const nextConfig = {
  output: "export",
  trailingSlash: true,
}

2. Ağır bileşenleri lazy load edin

const Chart = dynamic(() => import('@/components/Chart'), { ssr: false })

3. Görselleri derleme zamanında optimize edin

Statik export ile sharp kullanarak tüm görselleri derleme adımında önceden optimize edin.

4. CSS transform tercih edin

Yalnızca transform ve opacity'yi animasyonlayın — width, height veya top/left asla.

5. Kritik varlıkları preload edin

<link rel="preload" href="/logo.svg" as="image" type="image/svg+xml" />

6. content-visibility: auto kullanın

Ekran dışı bölümlere uygulayarak render işlemini atlayın.

7. Üretimde console.log'u kaldırın

compiler: { removeConsole: process.env.NODE_ENV === "production" }

8. Paket importlarını optimize edin

experimental: {
  optimizePackageImports: ["lucide-react", "framer-motion"],
}

9. Dış domainler için DNS prefetch yapın

<link rel="dns-prefetch" href="https://api.example.com" />

10. Önce ölçün — sonra optimize edin

Lighthouse CI'yı GitHub Actions pipeline'ınıza ekleyerek performans gerilimlerini otomatik olarak yakalayın.

Uygulamanızın performansını denetlememizi ister misiniz? İletişime geçin.