Next.js 13+ 严格遵循服务端/客户端组件分离原则，不支持在单个 .tsx 文件中同时定义服务端渲染内容和带 "use client" 的交互逻辑；必须将客户端功能（如 useRouter）提取至独立的客户端组件文件中。
next.js 13+ 严格遵循服务端/客户端组件分离原则，不支持在单个 `.tsx` 文件中同时定义服务端渲染内容和带 `"use client"` 的交互逻辑；必须将客户端功能（如 `userouter`）提取至独立的客户端组件文件中。
在 Next.js 13 及更高版本中，服务端组件（Server Components）和客户端组件（Client Components）的边界是文件级（file-level）的——即整个模块要么是服务端组件（默认），要么是客户端组件（需显式声明 "use client" 指令）。这意味着你无法在一个 page.tsx 文件中既写服务端渲染逻辑（如数据获取、静态 HTML 构建），又直接嵌入带状态或 Hook 的客户端交互代码。
例如，以下写法 ❌ 是非法且会报错的：
// ❌ 错误示例：page.tsx（禁止混用）
import { useRouter } from 'next/navigation';
export default function MyPage() {
const router = useRouter(); // ⚠️ 不允许：未声明 "use client"
return (
<div>
<h1>Welcome</h1>
<button onclick="{()"> router.back()}>Go Back</button>
</div>
);
}
✅ 正确做法是拆分为两个文件：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
// app/my-page/page.tsx —— 服务端组件（默认）
import ClientBackButton from './ClientBackButton';
export default function MyPage() {
return (
<div>
<h1>Welcome to My Page</h1>
<p>This content is rendered server-side.</p>
<clientbackbutton></clientbackbutton> {/* 客户端组件作为子组件引入 */}
</div>
);
}
// app/my-page/ClientBackButton.tsx —— 客户端组件
'use client';
import { useRouter } from 'next/navigation';
export default function ClientBackButton() {
const router = useRouter();
return (
<button onclick="{()"> router.back()}
className="px-4 py-2 bg-blue-600 text-white rounded"
>
Go Back
</button>
);
}
⚠️ 注意事项：
- "use client" 必须是文件顶部第一行非注释语句，且不能出现在服务端组件文件中；
- 即使组件仅含一个按钮，也必须单独成文件——这是 Next.js 架构设计的强制约束，而非权衡取舍；
- 不要尝试通过动态导入（dynamic(..., { ssr: false })）在服务端文件中“绕过”该限制：它仍需指向一个独立的客户端模块，本质仍是文件分离；
- 文件拆分虽增加目录层级，但提升了可测试性、可复用性与服务端/客户端职责清晰度，长期维护收益显著。
总结：这不是开发效率问题，而是 Next.js 渲染模型的根本设计。接受文件级隔离，是写出健壮、可扩展 Next.js 应用的前提。
