Fitur Lanjutan Next.js
Optimasi gambar, optimasi font, optimasi skrip, analytics, edge runtime, fitur eksperimental
1Apa keuntungan utama menggunakan next/image dibandingkan tag img standar?
Apa keuntungan utama menggunakan next/image dibandingkan tag img standar?
Jawaban
next/image secara otomatis mengoptimalkan gambar dengan menghasilkan berbagai ukuran dan format modern (WebP, AVIF), menerapkan lazy loading secara default, dan meningkatkan Web Vitals dengan mencegah Cumulative Layout Shift melalui perhitungan dimensi otomatis. Berbeda dengan tag img standar yang memuat gambar asli, next/image menyajikan ukuran optimal berdasarkan viewport dan rasio piksel perangkat. Pendekatan ini secara signifikan mengurangi waktu pemuatan dan konsumsi bandwidth.
2Kapan menggunakan properti priority pada komponen next/image?
Kapan menggunakan properti priority pada komponen next/image?
Jawaban
Properti priority menonaktifkan lazy loading dan memuat ulang gambar secara langsung, yang sangat penting untuk gambar above-the-fold yang memengaruhi Largest Contentful Paint (LCP). Tanpa priority, gambar kritis ini akan dimuat secara lazy, menunda LCP dan menurunkan Core Web Vitals. Gunakan priority hanya untuk 1-2 gambar yang terlihat saat halaman pertama dimuat, biasanya hero images atau banner utama.
3Konfigurasi next/image mana yang memungkinkan penyajian gambar dari domain eksternal?
Konfigurasi next/image mana yang memungkinkan penyajian gambar dari domain eksternal?
Jawaban
Properti remotePatterns di next.config.js memungkinkan penentuan domain eksternal yang diizinkan untuk menyajikan gambar, dengan kontrol granular atas protokol, hostname, port, dan pathname. Pendekatan ini menggantikan properti domains yang sudah usang dan menawarkan keamanan yang ditingkatkan dengan membatasi sumber yang diizinkan secara tepat. Mengonfigurasi remotePatterns mencegah kesalahan 400 saat memuat gambar yang dihosting di CDN atau layanan pihak ketiga seperti Cloudinary atau AWS S3.
Apa perbedaan antara fill dan responsive untuk sizing next/image?
Bagaimana cara mengoptimalkan gambar statis yang diimpor secara lokal dengan next/image?
+21 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Form & Controlled Components
Pengambilan Data & API
React Query (TanStack Query)
Styling & CSS-in-JS
Dasar-dasar Next.js
TypeScript dengan React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigasi Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Pengujian React
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Keamanan React & Praktik Terbaik
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis