“use client”这一行
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 19 课，共 47 课。
'use client' 看起来像是有人忘了删除的一段多余字符串。其实不是：它是一条指令，有两条规则值得记住，因为这两条规则都容易让人踩坑。
规则 1：它必须是第一行
在导入语句之前。在重要注释之前。文件中的第一行：
'use client';
import { useState } from 'react';把它放在 import 语句下面，它就不再是指令，而会变成一个毫无意义的字符串表达式，文件仍然是服务器组件，你也会遇到钩子错误，就像你从来没写过它一样。这个问题会让人白白花不少时间，因为那一行明明就在文件里，看起来也没问题。
规则 2：它标记整个文件
无法只标记一个组件。如果文件中有这个指令，文件中定义的所有内容都是客户端代码：
'use client';
function Row() { … } // 客户端
export default function Table() { … } // 也是客户端它还会向下传播：客户端组件导入并渲染的任何内容也会变成客户端代码。在一个大型文件顶部添加一条指令，就可能悄悄地向浏览器发送大量 JavaScript，而这正是下一课要解决的问题。
挑战
简单components/Counter.jsx 中的 'use client' 行位置不对。即使如此，应用仍会因 Hook 错误而无法运行。
- 移动
'use client';，让它成为components/Counter.jsx的第一行，位于导入语句上方。
该文件中的两个组件，即 Counter 和它所渲染的 ResetButton，都会因为这一行而成为客户端组件。你不需要第二条指令，也不应该添加第二条。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
