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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Json Repair Kit" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit" class="overflowclass">Json Repair Kit</a>
<p class="overflowclass">使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。</p>
</div>
<a rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<backbutton></backbutton> {/* 客户端组件可安全嵌入服务端组件树中 */}
</div>
);
}
⚠️ 注意事项：
- 客户端组件文件必须以 "use client" 开头，且不可省略；
- 不要试图在服务端组件内部使用 use client 注释（无效）；
- 虽然多一个文件看似冗余，但这是 Next.js 保障服务端渲染完整性、避免水合错误（hydration mismatch）和 bundle 泄漏的关键机制；
- 组件拆分也利于测试、复用和未来扩展（如添加 loading 状态或确认弹窗）。
总结：这不是开发效率的妥协，而是框架对渲染确定性与性能的主动约束。拥抱这一约定，才能充分发挥 App Router 的优势——轻量客户端 bundle、零 JS 传输的服务端 HTML、以及更清晰的渲染边界。
