# Erweiterte Next.js-Funktionen (React / Next.js) > Bildoptimierung, Schriftartoptimierung, Skriptoptimierung, Analytics, Edge Runtime, experimentelle Funktionen - 24 Interview-Fragen - Senior - [Interview-Fragen: React / Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen.md) ## 1. 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. ## 2. 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. ## 3. 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. ## 21 weitere Fragen verfügbar - Was ist der Unterschied zwischen fill und responsive beim next/image-Sizing? - Wie werden lokal importierte statische Bilder mit next/image optimiert? Kostenlos registrieren: https://sharpskill.dev/de/login ## Weitere React / Next.js-Interviewthemen - [JavaScript-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/javascript-essentials.md): 25 Fragen, Junior - [React-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-fundamentals.md): 20 Fragen, Junior - [React Hooks](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-hooks.md): 22 Fragen, Junior - [Komponentenlebenszyklus](https://sharpskill.dev/de/technologies/react-next/interviewfragen/component-lifecycle.md): 18 Fragen, Junior - [React Router](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-router.md): 20 Fragen, Junior - [Zustandsverwaltung mit Context](https://sharpskill.dev/de/technologies/react-next/interviewfragen/state-management-context.md): 18 Fragen, Junior - [Formulare & Controlled Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/forms-controlled-components.md): 20 Fragen, Mid-Level - [Datenabruf & API](https://sharpskill.dev/de/technologies/react-next/interviewfragen/fetching-data-api.md): 20 Fragen, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-query-tanstack.md): 20 Fragen, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/de/technologies/react-next/interviewfragen/styling-css-in-js.md): 18 Fragen, Mid-Level - [Next.js Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-fundamentals.md): 25 Fragen, Mid-Level - [TypeScript mit React](https://sharpskill.dev/de/technologies/react-next/interviewfragen/typescript-react.md): 20 Fragen, Mid-Level - [Next.js Data Fetching](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-data-fetching.md): 24 Fragen, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-server-actions.md): 20 Fragen, Mid-Level - [Routing & Navigation in Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-routing-navigation.md): 22 Fragen, Mid-Level - [Next.js API Routes](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-api-routes.md): 20 Fragen, Mid-Level - [Next.js Metadata & SEO](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-metadata-seo.md): 18 Fragen, Mid-Level - [Next.js Middleware & Auth](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-middleware-auth.md): 22 Fragen, Mid-Level - [React Testing](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-testing.md): 20 Fragen, Mid-Level - [Zustand State Management](https://sharpskill.dev/de/technologies/react-next/interviewfragen/zustand-state-management.md): 18 Fragen, Mid-Level - [React Performance-Optimierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-performance-optimization.md): 22 Fragen, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-error-boundaries.md): 18 Fragen, Senior - [Advanced React Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/advanced-react-patterns.md): 20 Fragen, Senior - [Next.js Deployment & Produktion](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-deployment-production.md): 20 Fragen, Senior - [Architecture & Design Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-architecture-patterns.md): 22 Fragen, Senior - [React Server Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-server-components.md): 26 Fragen, Senior - [Next.js Internationalisierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-internationalization.md): 20 Fragen, Senior - [React Sicherheit & Best Practices](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-security-best-practices.md): 22 Fragen, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-advanced-features