Question 1

Middleware trong Next.js là gì?

Accepted Answer

Middleware trong Next.js là mã được thực thi trước khi một yêu cầu được xử lý, cho phép bạn chỉnh sửa phản hồi, chuyển hướng, thêm headers hoặc chặn quyền truy cập. Nó chạy trên Edge Runtime để có hiệu suất tối ưu. Thường được sử dụng cho xác thực, xác định vị trí địa lý hoặc logging.

Question 2

Đặt file middleware ở đâu trong dự án Next.js với App Router?

Accepted Answer

File middleware.ts (hoặc .js) phải được đặt ở thư mục gốc của dự án, cùng cấp với thư mục app. Next.js tự động phát hiện file này và thực thi nó cho tất cả các route. Ngoài ra, có thể đặt trong thư mục src nếu dự án sử dụng cấu trúc đó.

Question 3

Làm thế nào để xác định các route mà middleware thực thi?

Accepted Answer

Sử dụng cấu hình matcher trong middleware cho phép chỉ định các route liên quan thông qua các mẫu đường dẫn. Theo mặc định, middleware thực thi trên tất cả các route ngoại trừ các file tĩnh. Matcher hỗ trợ wildcards và regex để kiểm soát chính xác các route mục tiêu.

Middleware & Auth trong Next.js

Middleware trong Next.js là gì?

Câu trả lời

Đặt file middleware ở đâu trong dự án Next.js với App Router?

Câu trả lời

Làm thế nào để xác định các route mà middleware thực thi?

Câu trả lời

Ưu điểm chính của việc sử dụng NextAuth.js cho xác thực là gì?

Làm thế nào để bảo vệ một route bằng middleware của Next.js?

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

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