读懂错误
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 18 课，共 47 课。
你会在完全理解服务器/客户端边界之前很久就遇到它，而且你会通过错误消息遇到它。没关系。框架错误不是惩罚，而是学习规则最快的方式。
这是你最先会遇到的问题。页面使用了 useState，应用无法渲染，运行时提示：
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.像读同事的便条一样，分成三部分来读：
- 出了什么问题：某个组件需要使用 React hook
- 在哪里：
<Home>，这样你就知道要打开哪个组件 - 规则和修复方法：hook 只能在客户端组件中使用；添加
"use client"
好的框架错误信息会指出你违反了哪条规则。略过它，你可能要猜 20 分钟；读懂它，20 秒就能解决问题。这项技能值得你刻意练习，因为它能区分出喜欢使用新框架的人和总是与框架较劲的人。
现在轮到你自己来修复一个问题了。
挑战
入门这个计数器页面坏了。运行它，看看运行时提示了什么。
这个页面调用了 useState，但它是一个服务器组件，而 Hook 只能在客户端组件中使用。
- 严格按照错误提示操作：将
app/page.jsx标记为客户端组件。 - 不要做任何其他改动：计数器逻辑已经正确。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
