Question 1

Vai trò chính của file middleware.ts trong ứng dụng Next.js với next-intl là gì?

Accepted Answer

Middleware next-intl tự động phát hiện locale của người dùng (qua header Accept-Language, cookie hoặc URL) và chuyển hướng đến URL phù hợp với tiền tố locale. Nó chạy trước mỗi yêu cầu và xử lý việc thương lượng locale mà không cần thêm mã trong các component. Đây là điểm vào bắt buộc để kích hoạt routing i18n trong Next.js App Router.

Question 2

Trong next-intl, các file dịch nên được đặt ở đâu để có cấu trúc dự án tối ưu?

Accepted Answer

Các file dịch được đặt trong messages/[locale].json ở thư mục gốc của dự án (ví dụ: messages/fr.json, messages/en.json). Quy ước này giúp dễ dàng tìm thấy các bản dịch và cho phép next-intl tải chúng tự động qua cấu hình i18n. Một số dự án cũng sử dụng messages/[locale]/ với các file riêng biệt theo namespace để tổ chức tốt hơn.

Question 3

Sự khác biệt chính giữa useTranslations và getTranslations trong next-intl là gì?

Accepted Answer

useTranslations là một hook React đồng bộ cho Client Components, trong khi getTranslations là hàm async cho Server Components. getTranslations cho phép lấy bản dịch phía server mà không cần gửi JavaScript đến client, cải thiện hiệu suất. useTranslations cần thiết cho các component tương tác yêu cầu chỉ thị use client.

Quốc tế hóa Next.js

Vai trò chính của file middleware.ts trong ứng dụng Next.js với next-intl là gì?

Câu trả lời

Trong next-intl, các file dịch nên được đặt ở đâu để có cấu trúc dự án tối ưu?

Câu trả lời

Sự khác biệt chính giữa useTranslations và getTranslations trong next-intl là gì?

Câu trả lời

Làm thế nào để cấu hình các locale được hỗ trợ trong next-intl?

Cú pháp để sử dụng biến trong bản dịch next-intl 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

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

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

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