# Tính năng nâng cao của Next.js (React / Next.js)

> Tối ưu hóa hình ảnh, tối ưu hóa font, tối ưu hóa script, analytics, edge runtime, tính năng thực nghiệm

- 24 câu hỏi phỏng vấn
- Senior
- [Câu hỏi phỏng vấn: React / Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van.md)

## 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ì?

**Câu trả lời**

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.

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

**Câu trả lời**

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.

## 3. 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**

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.

## Còn 21 câu hỏi nữa

- 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?

Đăng ký miễn phí: https://sharpskill.dev/vi/login

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

- [Nền tảng JavaScript](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/javascript-essentials.md): 25 câu hỏi, Junior
- [Nền tảng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-fundamentals.md): 20 câu hỏi, Junior
- [React Hooks](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-hooks.md): 22 câu hỏi, Junior
- [Vòng đời component](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/component-lifecycle.md): 18 câu hỏi, Junior
- [React Router](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-router.md): 20 câu hỏi, Junior
- [Quản lý state với Context](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/state-management-context.md): 18 câu hỏi, Junior
- [Biểu mẫu và Controlled Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/forms-controlled-components.md): 20 câu hỏi, Mid-Level
- [Lấy dữ liệu & API](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/fetching-data-api.md): 20 câu hỏi, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-query-tanstack.md): 20 câu hỏi, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/styling-css-in-js.md): 18 câu hỏi, Mid-Level
- [Nền tảng Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-fundamentals.md): 25 câu hỏi, Mid-Level
- [TypeScript với React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/typescript-react.md): 20 câu hỏi, Mid-Level
- [Data Fetching trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-data-fetching.md): 24 câu hỏi, Mid-Level
- [Server Actions trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-server-actions.md): 20 câu hỏi, Mid-Level
- [Định tuyến & Điều hướng trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-routing-navigation.md): 22 câu hỏi, Mid-Level
- [API Routes trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-api-routes.md): 20 câu hỏi, Mid-Level
- [Metadata & SEO trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-metadata-seo.md): 18 câu hỏi, Mid-Level
- [Middleware & Auth trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-middleware-auth.md): 22 câu hỏi, Mid-Level
- [Kiểm thử React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-testing.md): 20 câu hỏi, Mid-Level
- [Zustand State Management](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/zustand-state-management.md): 18 câu hỏi, Mid-Level
- [Tối ưu hiệu năng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-performance-optimization.md): 22 câu hỏi, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-error-boundaries.md): 18 câu hỏi, Senior
- [Advanced React Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/advanced-react-patterns.md): 20 câu hỏi, Senior
- [Triển khai & Môi trường Production với Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-deployment-production.md): 20 câu hỏi, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-architecture-patterns.md): 22 câu hỏi, Senior
- [React Server Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-server-components.md): 26 câu hỏi, Senior
- [Quốc tế hóa Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-internationalization.md): 20 câu hỏi, Senior
- [React Bảo mật & Thực hành tốt nhất](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-security-best-practices.md): 22 câu hỏi, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-advanced-features