Next.js 13+ 的 App Router 强制要求服务端组件（默认）与客户端组件（需显式声明 "use client"）严格分离，因此无法在单个 .tsx 文件中同时定义二者。
next.js 13+ 的 app router 强制要求服务端组件（默认）与客户端组件（需显式声明 `"use client"`）严格分离，因此无法在单个 `.tsx` 文件中同时定义二者。
在 Next.js 的架构设计中，服务端组件（Server Components）和客户端组件（Client Components）属于不同执行环境：前者在服务端渲染、无浏览器 API 访问权限；后者在客户端水合（hydration）后运行，可使用 useState、useEffect、useRouter 等钩子。这种分离是编译时强制的——"use client" 指令必须作为文件顶部的纯文本指令（且只能出现在模块顶层），Next.js 编译器据此将整个模块标记为客户端入口。这意味着：
- ❌ 你不能在一个文件中写 export default function Page()（服务端） + export function BackButton()（客户端）并期望后者被正确识别；
- ❌ 无法通过条件判断、作用域嵌套或动态导入绕过该限制；
- ❌ 即使只用一个按钮调用 router.back()，也必须将其封装为独立的客户端组件文件。
✅ 正确做法是创建一个专用的客户端组件文件，例如 BackButton.tsx：
// app/components/BackButton.tsx
"use client";
import { useRouter } from "next/navigation";
export default function BackButton() {
const router = useRouter();
return (
<button
type="button"
onClick={() => router.back()}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
← Go Back
</button>
);
}然后在服务端页面中直接导入使用：
// app/dashboard/page.tsx
export default function DashboardPage() {
return (
<div className="p-6">
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
<p>Welcome to your admin dashboard.</p>
<BackButton /> {/* 客户端组件可安全嵌入服务端组件树中 */}
</div>
);
}⚠️ 注意事项：
- 客户端组件文件必须以 "use client" 开头，且不可省略；
- 不要试图在服务端组件内部使用 use client 注释（无效）；
- 虽然多一个文件看似冗余，但这是 Next.js 保障服务端渲染完整性、避免水合错误（hydration mismatch）和 bundle 泄漏的关键机制；
- 组件拆分也利于测试、复用和未来扩展（如添加 loading 状态或确认弹窗）。
总结：这不是开发效率的妥协，而是框架对渲染确定性与性能的主动约束。拥抱这一约定，才能充分发挥 App Router 的优势——轻量客户端 bundle、零 JS 传输的服务端 HTML、以及更清晰的渲染边界。
