Next.js Gelişmiş Özellikler
Görsel optimizasyonu, yazı tipi optimizasyonu, script optimizasyonu, analytics, edge runtime, deneysel özellikler
1next/image kullanmanın standart bir img etiketine kıyasla temel avantajı nedir?
next/image kullanmanın standart bir img etiketine kıyasla temel avantajı nedir?
Cevap
next/image, birden fazla boyut ve modern format (WebP, AVIF) oluşturarak görüntüleri otomatik olarak optimize eder, varsayılan olarak lazy loading uygular ve otomatik boyut hesaplamasıyla Cumulative Layout Shift'i önleyerek Web Vitals'ı iyileştirir. Orijinal görüntüyü yükleyen standart bir img etiketinin aksine, next/image viewport ve cihaz piksel oranına göre optimal boyutu sunar. Bu yaklaşım, yükleme süresini ve bant genişliği tüketimini önemli ölçüde azaltır.
2next/image bileşeninde priority özelliği ne zaman kullanılmalıdır?
next/image bileşeninde priority özelliği ne zaman kullanılmalıdır?
Cevap
priority özelliği, lazy loading'i devre dışı bırakır ve görüntüyü hemen önceden yükler; bu, Largest Contentful Paint'i (LCP) etkileyen above-the-fold görseller için çok önemlidir. priority olmadan bu kritik görseller lazy load edilir, LCP gecikir ve Core Web Vitals bozulur. priority'yi yalnızca sayfa ilk yüklendiğinde görünen 1-2 görsel için kullanın; genellikle hero görseller veya ana bannerlar.
3Harici bir etki alanından görüntü sunmaya izin veren next/image yapılandırması hangisidir?
Harici bir etki alanından görüntü sunmaya izin veren next/image yapılandırması hangisidir?
Cevap
next.config.js'deki remotePatterns özelliği, protokol, hostname, port ve pathname üzerinde ayrıntılı kontrol ile görüntü sunmak için yetkili harici alanların tanımlanmasına olanak tanır. Bu yaklaşım, kullanımdan kaldırılan domains özelliğinin yerini alır ve yetkili kaynakları tam olarak sınırlayarak gelişmiş güvenlik sunar. remotePatterns'ı yapılandırmak, Cloudinary veya AWS S3 gibi CDN'lerde veya üçüncü taraf hizmetlerde barındırılan görüntüler yüklenirken 400 hatalarını önler.
next/image boyutlandırmasında fill ve responsive arasındaki fark nedir?
next/image ile yerel olarak içe aktarılan statik görseller nasıl optimize edilir?
+21 mülakat soruları
Diğer React / Next.js mülakat konuları
JavaScript Temelleri
React Temelleri
React Hooks
Bileşen yaşam döngüsü
React Router
Context ile state yönetimi
Formlar ve Controlled Components
Veri Çekme ve API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Temelleri
React ile TypeScript
Next.js Veri Çekme
Next.js Server Actions
Next.js Routing ve Navigasyon
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware ve Auth
React Testing
Zustand State Management
React Performans Optimizasyonu
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Dağıtım & Üretim
Architecture & Design Patterns
React Server Components
Next.js Uluslararasılaştırma
React Güvenlik & En İyi Uygulamalar
Bir sonraki mülakatın için React / Next.js'de uzmanlaş
Tüm sorulara, flashcards'a, teknik testlere, code review alıştırmalarına ve mülakat simülatörlerine eriş.
Ücretsiz başla