Dùng bộ mã trong Next.js
Giữ ranh giới client component và kiểm tra trang App Router.
Đặt các tệp
Chọn Next.js trên trang ví dụ và làm theo INSTALL.vi.md. Sao chép cả thư mục, giữ nguyên đường dẫn con. Nhập SelectedExample.tsx vào trang App Router. Giữ chỉ thị client component có sẵn trong tệp này và các tệp tương tác.
Giữ kết quả render nhất quán
Không cần biến toàn bộ trang thành client component. Chỉ gọi API trình duyệt trong hàm xử lý hoặc effect. Nội dung và thiết lập ban đầu phải giống nhau giữa máy chủ và lần render đầu trên client.
Định nghĩa hàm xử lý sự kiện trong client component. Không truyền hàm máy chủ thông thường làm hàm xử lý nhấn cho client component.
Kiểm tra ứng dụng thật
Chạy lệnh kiểm tra kiểu và build production đã có trong package.json. Sau đó mở trang trực tiếp, chuyển tới trang từ nơi khác và thử thao tác bằng bàn phím. Kiểm tra lỗi hydration trong console.
Việc chọn loại dự án hoặc có bộ mã không chứng minh tương thích với mọi phiên bản Next.js. Báo cáo kiểm tra của ví dụ và bản build ứng dụng cho biết phần nào đã được kiểm tra. Không nâng cấp dependency chỉ để thêm bộ mã.