Erweiterte Next.js-Funktionen
Bildoptimierung, Schriftartoptimierung, Skriptoptimierung, Analytics, Edge Runtime, experimentelle Funktionen
1Was ist der Hauptvorteil der Verwendung von next/image im Vergleich zu einem Standard-img-Tag?
Was ist der Hauptvorteil der Verwendung von next/image im Vergleich zu einem Standard-img-Tag?
Antwort
next/image optimiert Bilder automatisch, indem es mehrere Größen und moderne Formate (WebP, AVIF) generiert, Lazy Loading standardmäßig anwendet und Web Vitals verbessert, indem Cumulative Layout Shift durch automatische Dimensionsberechnung verhindert wird. Anders als ein Standard-img-Tag, das das Originalbild lädt, liefert next/image die optimale Größe basierend auf Viewport und Gerätepixelverhältnis. Dieser Ansatz reduziert die Ladezeit und den Bandbreitenverbrauch erheblich.
2Wann sollte die priority-Eigenschaft auf einem next/image-Komponenten verwendet werden?
Wann sollte die priority-Eigenschaft auf einem next/image-Komponenten verwendet werden?
Antwort
Die priority-Eigenschaft deaktiviert Lazy Loading und lädt das Bild sofort vor, was für above-the-fold-Bilder, die den Largest Contentful Paint (LCP) beeinflussen, entscheidend ist. Ohne priority würden diese kritischen Bilder lazy geladen, was LCP verzögert und Core Web Vitals verschlechtert. Verwende priority nur für 1-2 beim initialen Seitenladen sichtbare Bilder, typischerweise Hero-Bilder oder Hauptbanner.
3Welche next/image-Konfiguration ermöglicht das Bereitstellen von Bildern von einer externen Domain?
Welche next/image-Konfiguration ermöglicht das Bereitstellen von Bildern von einer externen Domain?
Antwort
Die remotePatterns-Eigenschaft in next.config.js ermöglicht die Definition autorisierter externer Domains für die Bildbereitstellung, mit granularer Kontrolle über Protokoll, Hostname, Port und Pfadname. Dieser Ansatz ersetzt die veraltete domains-Eigenschaft und bietet erhöhte Sicherheit durch präzise Begrenzung autorisierter Quellen. Die Konfiguration von remotePatterns verhindert 400-Fehler beim Laden von Bildern, die auf CDNs oder Drittanbieterdiensten wie Cloudinary oder AWS S3 gehostet werden.
Was ist der Unterschied zwischen fill und responsive beim next/image-Sizing?
Wie werden lokal importierte statische Bilder mit next/image optimiert?
+21 Interview-Fragen
Weitere React / Next.js-Interviewthemen
JavaScript-Grundlagen
React-Grundlagen
React Hooks
Komponentenlebenszyklus
React Router
Zustandsverwaltung mit Context
Formulare & Controlled Components
Datenabruf & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Grundlagen
TypeScript mit React
Next.js Data Fetching
Next.js Server Actions
Routing & Navigation in Next.js
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance-Optimierung
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Deployment & Produktion
Architecture & Design Patterns
React Server Components
Next.js Internationalisierung
React Sicherheit & Best Practices
Meistere React / Next.js für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten