# Next.js Gelişmiş Özellikler (React / Next.js)

> Görsel optimizasyonu, yazı tipi optimizasyonu, script optimizasyonu, analytics, edge runtime, deneysel özellikler

- 24 mülakat soruları
- Senior
- [Mülakat Soruları: React / Next.js](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari.md)

## 1. 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.

## 2. 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.

## 3. 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.

## 21 soru daha mevcut

- 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?

Ücretsiz kaydol: https://sharpskill.dev/tr/login

## Diğer React / Next.js mülakat konuları

- [JavaScript Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/javascript-essentials.md): 25 soru, Junior
- [React Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-fundamentals.md): 20 soru, Junior
- [React Hooks](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-hooks.md): 22 soru, Junior
- [Bileşen yaşam döngüsü](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/component-lifecycle.md): 18 soru, Junior
- [React Router](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-router.md): 20 soru, Junior
- [Context ile state yönetimi](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/state-management-context.md): 18 soru, Junior
- [Formlar ve Controlled Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/forms-controlled-components.md): 20 soru, Mid-Level
- [Veri Çekme ve API](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/fetching-data-api.md): 20 soru, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-query-tanstack.md): 20 soru, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/styling-css-in-js.md): 18 soru, Mid-Level
- [Next.js Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-fundamentals.md): 25 soru, Mid-Level
- [React ile TypeScript](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/typescript-react.md): 20 soru, Mid-Level
- [Next.js Veri Çekme](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-data-fetching.md): 24 soru, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-server-actions.md): 20 soru, Mid-Level
- [Next.js Routing ve Navigasyon](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-routing-navigation.md): 22 soru, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-api-routes.md): 20 soru, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-metadata-seo.md): 18 soru, Mid-Level
- [Next.js Middleware ve Auth](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-middleware-auth.md): 22 soru, Mid-Level
- [React Testing](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-testing.md): 20 soru, Mid-Level
- [Zustand State Management](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/zustand-state-management.md): 18 soru, Mid-Level
- [React Performans Optimizasyonu](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-performance-optimization.md): 22 soru, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-error-boundaries.md): 18 soru, Senior
- [Advanced React Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/advanced-react-patterns.md): 20 soru, Senior
- [Next.js Dağıtım & Üretim](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-deployment-production.md): 20 soru, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-architecture-patterns.md): 22 soru, Senior
- [React Server Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-server-components.md): 26 soru, Senior
- [Next.js Uluslararasılaştırma](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-internationalization.md): 20 soru, Senior
- [React Güvenlik & En İyi Uygulamalar](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-security-best-practices.md): 22 soru, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-advanced-features