Zaawansowane funkcje Next.js
Optymalizacja obrazów, optymalizacja czcionek, optymalizacja skryptów, analytics, edge runtime, funkcje eksperymentalne
1Jaka jest główna zaleta używania next/image w porównaniu ze standardowym tagiem img?
Jaka jest główna zaleta używania next/image w porównaniu ze standardowym tagiem img?
Odpowiedź
next/image automatycznie optymalizuje obrazy, generując wiele rozmiarów i nowoczesnych formatów (WebP, AVIF), domyślnie stosuje lazy loading i poprawia Web Vitals, zapobiegając Cumulative Layout Shift przez automatyczne obliczanie wymiarów. W przeciwieństwie do standardowego tagu img, który ładuje oryginalny obraz, next/image serwuje optymalny rozmiar na podstawie viewportu i gęstości pikseli urządzenia. To podejście znacząco skraca czas ładowania i zmniejsza zużycie przepustowości.
2Kiedy używać właściwości priority na komponencie next/image?
Kiedy używać właściwości priority na komponencie next/image?
Odpowiedź
Właściwość priority wyłącza lazy loading i wstępnie ładuje obraz natychmiast, co jest kluczowe dla obrazów above-the-fold wpływających na Largest Contentful Paint (LCP). Bez priority te krytyczne obrazy byłyby ładowane leniwie, opóźniając LCP i pogarszając Core Web Vitals. Używaj priority tylko dla 1-2 obrazów widocznych przy pierwszym załadowaniu strony, zazwyczaj hero images lub głównych banerów.
3Która konfiguracja next/image pozwala na serwowanie obrazów z zewnętrznej domeny?
Która konfiguracja next/image pozwala na serwowanie obrazów z zewnętrznej domeny?
Odpowiedź
Właściwość remotePatterns w next.config.js pozwala na zdefiniowanie autoryzowanych zewnętrznych domen do serwowania obrazów, z granularną kontrolą nad protokołem, hostem, portem i ścieżką. To podejście zastępuje przestarzałą właściwość domains i oferuje zwiększone bezpieczeństwo przez precyzyjne ograniczenie autoryzowanych źródeł. Konfigurowanie remotePatterns zapobiega błędom 400 przy ładowaniu obrazów hostowanych na CDN lub usługach stron trzecich jak Cloudinary czy AWS S3.
Jaka jest różnica między fill a responsive dla sizingu next/image?
Jak optymalizować statyczne obrazy importowane lokalnie za pomocą next/image?
+21 pytań z rozmów
Inne tematy rekrutacyjne React / Next.js
Podstawy JavaScript
Podstawy React
React Hooks
Cykl życia komponentu
React Router
Zarządzanie stanem z Context
Formularze i Controlled Components
Pobieranie danych i API
React Query (TanStack Query)
Styling & CSS-in-JS
Podstawy Next.js
TypeScript z React
Pobieranie danych w Next.js
Server Actions w Next.js
Routing i Nawigacja w Next.js
API Routes w Next.js
Metadata & SEO w Next.js
Middleware i Auth w Next.js
Testowanie React
Zustand State Management
Optymalizacja wydajności React
Error Boundaries & Error Handling
Advanced React Patterns
Wdrożenie i Produkcja Next.js
Architecture & Design Patterns
React Server Components
Internacjonalizacja Next.js
React Bezpieczeństwo & Najlepsze Praktyki
Opanuj React / Next.js na następną rozmowę
Uzyskaj dostęp do wszystkich pytań, flashcards, testów technicznych, ćwiczeń code review i symulatorów rozmów.
Zacznij za darmo