Đọc lỗi
Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 18 trên 47.
Bạn sẽ gặp ranh giới giữa máy chủ và máy khách từ rất lâu trước khi hiểu rõ về nó, và bạn sẽ gặp nó dưới dạng một thông báo lỗi. Không sao cả. Lỗi của framework không phải là hình phạt, chúng là cách nhanh nhất để học các quy tắc.
Đây là lỗi đầu tiên bạn sẽ gặp. Một trang sử dụng useState, ứng dụng từ chối hiển thị và thời gian chạy báo:
You're importing a component that needs a
React hook (in <Home>). Hooks only work in Client
Components. To fix this, add "use client" to the top
of the file.Đọc thông báo như cách bạn đọc lời nhắn từ đồng nghiệp, gồm ba phần:
- Vấn đề: một thành phần cần một hook của React
- Vị trí:
<Home>, để bạn biết cần mở thành phần nào - Quy tắc và cách khắc phục: hook chỉ hoạt động trong các thành phần phía máy khách; thêm
"use client"
Một thông báo lỗi tốt của framework sẽ nêu rõ quy tắc bạn đã vi phạm. Nếu chỉ lướt qua, bạn sẽ đoán mò suốt hai mươi phút; đọc kỹ thì chỉ mất hai mươi giây. Đây là kỹ năng đáng để luyện tập có chủ đích, vì nó phân biệt những người thích thú với framework mới với những người phải vật lộn với nó.
Đến lúc tự sửa một lỗi rồi.
Thử thách
Người mớiTrang bộ đếm này bị lỗi. Chạy trang và đọc thông báo của môi trường chạy.
Trang gọi useState, nhưng đây là thành phần máy chủ, còn hook chỉ hoạt động trong thành phần máy khách.
- Làm đúng theo yêu cầu trong lỗi: đánh dấu
app/page.jsxlà thành phần máy khách. - Không thay đổi gì khác: logic của bộ đếm đã chính xác.
Tự làm thử
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức thiết yếu về Next.js
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng