NextJS 13能否在同一文件中创建客户端与服务端组件？

完全可以在同一个page.tsx文件内创建客户端组件，不需要单独新建文件。具体实现方式如下：

核心逻辑 #

给需要客户端交互的组件单独加上"use client"指令即可——该指令仅作用于其下方的组件代码，不会影响文件里其他服务端渲染的内容，同时Next.js 13的App Router支持服务端组件直接嵌套客户端组件。

代码示例 #

// page.tsx - 大部分内容为服务端渲染
import { fetchServerData } from '@/lib/api';

// 服务端渲染的页面组件
export default async function ProductPage() {
  // 服务端侧的数据获取
  const product = await fetchServerData();

  return (
    <div className="product-page">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 直接引用同文件内的客户端组件 */}
      <BackButton />
    </div>
  );
}

// 客户端组件："use client"必须放在这段代码的最顶部
"use client";

import { useRouter } from 'next/navigation';

function BackButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.pop()} className="back-btn">
      返回上一页
    </button>
  );
}

注意事项 #

• "use client"指令不能嵌套在其他代码块里，必须放在客户端组件代码的最顶部，否则会失效。
• 如果这个按钮后续需要在多个页面复用，再考虑单独抽成独立文件；仅当前页面使用的话，同文件编写完全没问题，不会影响性能。

内容的提问来源于stack exchange，提问作者Sylith