Question 1

Phương pháp được khuyến nghị để định nghĩa metadata trong Next.js App Router là gì?

Accepted Answer

Next.js App Router giới thiệu đối tượng `metadata` được export từ layouts và pages để định nghĩa metadata theo cách type-safe và tối ưu. Cách tiếp cận này thay thế các component `<Head>` từ Next.js 12 và cho phép render metadata phía server. Export `metadata` là tĩnh và được phân tích tại build time để có hiệu suất SEO tốt hơn.

Question 2

Làm thế nào để tạo metadata động dựa trên các tham số route trong Next.js?

Accepted Answer

Hàm `generateMetadata` là bất đồng bộ và nhận `params` cùng `searchParams` làm tham số, cho phép tải dữ liệu để xây dựng metadata một cách động. Hàm này chạy phía server tại thời điểm render và có thể thực hiện các lệnh gọi API. Điều này cho phép tạo metadata duy nhất cho mỗi trang động, rất cần thiết cho SEO của các trang chi tiết.

Question 3

Next.js xử lý việc hợp nhất metadata giữa các layouts lồng nhau và pages như thế nào?

Accepted Answer

Next.js tự động hợp nhất metadata từ các layouts cha sang các pages con, với ưu tiên cho các giá trị gần nhất với page. Các trường bị ghi đè (title, description) ngoại trừ `openGraph.images` và `twitter.images` được hợp nhất dưới dạng mảng. Cơ chế cascade này cho phép định nghĩa metadata mặc định ở cấp root và ghi đè ở cấp page.

Metadata & SEO trong Next.js

Phương pháp được khuyến nghị để định nghĩa metadata trong Next.js App Router là gì?

Câu trả lời

Làm thế nào để tạo metadata động dựa trên các tham số route trong Next.js?

Câu trả lời

Next.js xử lý việc hợp nhất metadata giữa các layouts lồng nhau và pages như thế nào?

Câu trả lời

Lợi ích của việc sử dụng `title.template` trong metadata của Next.js là gì?

Phương pháp được khuyến nghị để định nghĩa favicon trong Next.js App Router là gì?

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

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

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

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