Question 1

Lợi thế chính của việc sử dụng next/image so với thẻ img tiêu chuẩn là gì?

Accepted Answer

next/image tự động tối ưu hóa hình ảnh bằng cách tạo nhiều kích thước và định dạng hiện đại (WebP, AVIF), áp dụng lazy loading theo mặc định và cải thiện Web Vitals bằng cách ngăn Cumulative Layout Shift thông qua tính toán kích thước tự động. Không giống thẻ img tiêu chuẩn tải hình ảnh gốc, next/image phục vụ kích thước tối ưu dựa trên viewport và tỷ lệ pixel thiết bị. Cách tiếp cận này giảm đáng kể thời gian tải và tiêu thụ băng thông.

Question 2

Khi nào nên sử dụng thuộc tính priority trên component next/image?

Accepted Answer

Thuộc tính priority vô hiệu hóa lazy loading và tải trước hình ảnh ngay lập tức, điều này rất quan trọng cho các hình ảnh above-the-fold ảnh hưởng đến Largest Contentful Paint (LCP). Không có priority, những hình ảnh quan trọng này sẽ được lazy load, làm chậm LCP và giảm Core Web Vitals. Chỉ dùng priority cho 1-2 hình ảnh hiển thị khi tải trang lần đầu, thường là hero images hoặc banner chính.

Question 3

Cấu hình next/image nào cho phép phục vụ hình ảnh từ domain bên ngoài?

Accepted Answer

Thuộc tính remotePatterns trong next.config.js cho phép xác định các domain bên ngoài được phép phục vụ hình ảnh, với kiểm soát chi tiết về giao thức, hostname, cổng và pathname. Cách tiếp cận này thay thế thuộc tính domains đã lỗi thời và cung cấp bảo mật nâng cao bằng cách giới hạn chính xác các nguồn được phép. Cấu hình remotePatterns ngăn lỗi 400 khi tải hình ảnh được lưu trữ trên CDN hoặc dịch vụ bên thứ ba như Cloudinary hay AWS S3.

Tính năng nâng cao của Next.js

Lợi thế chính của việc sử dụng next/image so với thẻ img tiêu chuẩn là gì?

Câu trả lời

Khi nào nên sử dụng thuộc tính priority trên component next/image?

Câu trả lời

Cấu hình next/image nào cho phép phục vụ hình ảnh từ domain bên ngoài?

Câu trả lời

Sự khác biệt giữa fill và responsive cho việc sizing của next/image là gì?

Làm thế nào để tối ưu hóa hình ảnh tĩnh được import cục bộ với next/image?

Các chủ đề phỏng vấn React / Next.js khác

Nền tảng JavaScript

Nền tảng React

React Hooks

Vòng đời component

React Router

Quản lý state với Context

Biểu mẫu và Controlled Components

Lấy dữ liệu & API

React Query (TanStack Query)

Styling & CSS-in-JS

Nền tảng Next.js

TypeScript với React

Data Fetching trong Next.js

Server Actions trong Next.js

Định tuyến & Điều hướng trong Next.js

API Routes trong Next.js

Metadata & SEO trong Next.js

Middleware & Auth trong Next.js

Kiểm thử React

Zustand State Management

Tối ưu hiệu năng React

Error Boundaries & Error Handling

Advanced React Patterns

Triển khai & Môi trường Production với Next.js

Architecture & Design Patterns

React Server Components

Quốc tế hóa Next.js

React Bảo mật & Thực hành tốt nhất

Nắm vững React / Next.js cho lần phỏng vấn tiếp theo