# Geavanceerde Next.js-functies (React / Next.js) > Beeldoptimalisatie, lettertype-optimalisatie, scriptoptimalisatie, analytics, edge runtime, experimentele functies - 24 gespreksvragen - Senior - [Gespreksvragen: React / Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen.md) ## 1. Wat is het belangrijkste voordeel van het gebruik van next/image vergeleken met een standaard img-tag? **Antwoord** next/image optimaliseert afbeeldingen automatisch door meerdere maten en moderne formaten (WebP, AVIF) te genereren, past standaard lazy loading toe en verbetert Web Vitals door Cumulative Layout Shift te voorkomen via automatische dimensieberekening. In tegenstelling tot een standaard img-tag die de originele afbeelding laadt, levert next/image de optimale maat op basis van viewport en apparaatpixelverhouding. Deze aanpak vermindert de laadtijd en het bandbreedteverbruik aanzienlijk. ## 2. Wanneer de priority-eigenschap gebruiken op een next/image-component? **Antwoord** De priority-eigenschap schakelt lazy loading uit en laadt de afbeelding direct vooraf, wat cruciaal is voor above-the-fold-afbeeldingen die de Largest Contentful Paint (LCP) beïnvloeden. Zonder priority zouden deze kritieke afbeeldingen lazy worden geladen, waardoor LCP wordt vertraagd en Core Web Vitals worden verslechterd. Gebruik priority alleen voor 1-2 afbeeldingen die zichtbaar zijn bij het initieel laden van de pagina, typisch hero-afbeeldingen of hoofdbanners. ## 3. Welke next/image-configuratie staat toe afbeeldingen te serveren van een extern domein? **Antwoord** De remotePatterns-eigenschap in next.config.js maakt het mogelijk geautoriseerde externe domeinen voor het serveren van afbeeldingen te definiëren, met granulaire controle over protocol, hostname, poort en padnaam. Deze aanpak vervangt de verouderde domains-eigenschap en biedt verbeterde beveiliging door geautoriseerde bronnen nauwkeurig te beperken. Het configureren van remotePatterns voorkomt 400-fouten bij het laden van afbeeldingen die worden gehost op CDN's of externe diensten zoals Cloudinary of AWS S3. ## Nog 21 vragen beschikbaar - Wat is het verschil tussen fill en responsive voor next/image-sizing? - Hoe statische afbeeldingen die lokaal worden geïmporteerd optimaliseren met next/image? Meld je gratis aan: https://sharpskill.dev/nl/login ## Andere React / Next.js-sollicitatieonderwerpen - [JavaScript-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/javascript-essentials.md): 25 vragen, Junior - [React-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-fundamentals.md): 20 vragen, Junior - [React Hooks](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-hooks.md): 22 vragen, Junior - [Componentlevenscyclus](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/component-lifecycle.md): 18 vragen, Junior - [React Router](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-router.md): 20 vragen, Junior - [Statusbeheer met Context](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/state-management-context.md): 18 vragen, Junior - [Formulieren & Controlled Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/forms-controlled-components.md): 20 vragen, Mid-Level - [Gegevens ophalen & API](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/fetching-data-api.md): 20 vragen, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-query-tanstack.md): 20 vragen, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/styling-css-in-js.md): 18 vragen, Mid-Level - [Next.js Fundamentals](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-fundamentals.md): 25 vragen, Mid-Level - [TypeScript met React](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/typescript-react.md): 20 vragen, Mid-Level - [Next.js Data Fetching](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-data-fetching.md): 24 vragen, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-server-actions.md): 20 vragen, Mid-Level - [Routing & Navigatie in Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-routing-navigation.md): 22 vragen, Mid-Level - [Next.js API Routes](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-api-routes.md): 20 vragen, Mid-Level - [Next.js Metadata & SEO](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-metadata-seo.md): 18 vragen, Mid-Level - [Next.js Middleware & Auth](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-middleware-auth.md): 22 vragen, Mid-Level - [React Testen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-testing.md): 20 vragen, Mid-Level - [Zustand State Management](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/zustand-state-management.md): 18 vragen, Mid-Level - [React Performance-optimalisatie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-performance-optimization.md): 22 vragen, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-error-boundaries.md): 18 vragen, Senior - [Advanced React Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/advanced-react-patterns.md): 20 vragen, Senior - [Next.js Deployment & Productie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-deployment-production.md): 20 vragen, Senior - [Architecture & Design Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-architecture-patterns.md): 22 vragen, Senior - [React Server Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-server-components.md): 26 vragen, Senior - [Next.js Internationalisering](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-internationalization.md): 20 vragen, Senior - [React Beveiliging & Best Practices](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-security-best-practices.md): 22 vragen, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-advanced-features