Recursos avançados do Next.js
Otimização de imagens, otimização de fontes, otimização de scripts, analytics, edge runtime, recursos experimentais
1Qual é a principal vantagem de usar next/image em comparação com uma tag img padrão?
Qual é a principal vantagem de usar next/image em comparação com uma tag img padrão?
Resposta
next/image otimiza automaticamente as imagens gerando múltiplos tamanhos e formatos modernos (WebP, AVIF), aplica lazy loading por padrão e melhora as Web Vitals ao prevenir o Cumulative Layout Shift através do cálculo automático de dimensões. Ao contrário de uma tag img padrão que carrega a imagem original, next/image serve o tamanho ideal com base no viewport e na densidade de pixels do dispositivo. Essa abordagem reduz significativamente o tempo de carregamento e o consumo de largura de banda.
2Quando usar a propriedade priority em um componente next/image?
Quando usar a propriedade priority em um componente next/image?
Resposta
A propriedade priority desativa o lazy loading e pré-carrega a imagem imediatamente, o que é crucial para imagens above-the-fold que impactam o Largest Contentful Paint (LCP). Sem priority, essas imagens críticas seriam carregadas com lazy loading, atrasando o LCP e degradando os Core Web Vitals. Use priority apenas para 1-2 imagens visíveis no carregamento inicial da página, tipicamente hero images ou banners principais.
3Qual configuração do next/image permite servir imagens de um domínio externo?
Qual configuração do next/image permite servir imagens de um domínio externo?
Resposta
A propriedade remotePatterns no next.config.js permite definir domínios externos autorizados para servir imagens, com controle granular sobre protocolo, hostname, porta e pathname. Essa abordagem substitui a propriedade domains (obsoleta) e oferece segurança aprimorada ao limitar com precisão as fontes autorizadas. Configurar remotePatterns evita erros 400 ao carregar imagens hospedadas em CDNs ou serviços de terceiros como Cloudinary ou AWS S3.
Qual é a diferença entre fill e responsive para o sizing do next/image?
Como otimizar imagens estáticas importadas localmente com next/image?
+21 perguntas de entrevista
Outros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos do React
React Hooks
Ciclo de vida dos componentes
React Router
Gerenciamento de estado com Context
Formulários e Controlled Components
Busca de dados e API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos do Next.js
TypeScript com React
Data Fetching no Next.js
Server Actions do Next.js
Roteamento e Navegação no Next.js
API Routes do Next.js
Metadata & SEO no Next.js
Middleware e Auth no Next.js
Testes em React
Zustand State Management
Otimização de Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Deploy e Produção com Next.js
Architecture & Design Patterns
React Server Components
Internacionalização do Next.js
React Security & Boas Práticas
Domine React / Next.js para sua proxima entrevista
Acesse todas as perguntas, flashcards, testes tecnicos, exercicios de code review e simuladores de entrevista.
Comece gratis