Next.js App Router中客户端与服务器组件的命名区分方案问询

在App Router模式下，尤其是涉及抽象组件时，确实容易混淆组件的运行环境，我通常会结合以下几种方式来清晰区分：

1. 官方推荐的文件后缀命名法 #

这是最直接且符合Next.js规范的方式，用.server.tsx和.client.tsx后缀明确标记组件类型：

• 若组件仅能在服务器端运行（比如包含数据获取、直接访问数据库逻辑），命名为[ComponentName].server.tsx，例如ProductList.server.tsx、AbstractDataFetcher.server.tsx；
• 若组件依赖客户端API（比如使用useState/useEffect钩子、操作window对象），命名为[ComponentName].client.tsx，例如InteractiveFilter.client.tsx、AbstractStatefulComponent.client.tsx；
• 当同一个业务逻辑需要两种环境的实现（比如服务器端渲染基础结构，客户端添加交互），这种命名方式能快速区分同功能的不同版本，避免文件混乱。

2. 目录结构划分法 #

针对规模较大的项目，我会用目录归类组件：

• 在components目录下新建server和client子目录，分别存放对应类型的组件，示例结构：

  src/
    components/
      server/
        AbstractTable.server.tsx
        UserProfileFetcher.server.tsx
      client/
        AbstractModal.client.tsx
        InfiniteScroll.client.tsx
  

这种方式让团队成员一眼通过路径判断组件类型，尤其适合抽象组件较多的场景，不用给每个文件都加后缀。

3. 显式指令与注释辅助 #

• 客户端组件必须添加'use client'指令，我会把它放在文件最顶部，即使已经用后缀或目录标记，也能双重确认；
• 对于服务器组件，虽然默认不需要指令，但我会在文件开头加注释// Server Component - 仅在服务器端运行，尤其是抽象组件，能提醒其他开发者不要在客户端错误引入。

注意事项 #

• 抽象组件如果是跨环境复用的基础组件，一定要明确运行限制：比如包含状态管理的抽象表单组件，必须标记为客户端组件并添加'use client'；仅用于服务器端数据封装的抽象组件，则标记为服务器组件；
• 不要过度依赖默认规则（无'use client'即为服务器组件），抽象组件的显式标记能避免后期维护时的误操作。

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