在create-t3-turbo项目中实现多应用共享与扩展TRPC路由的最佳实践

在基于create-t3-turbo构建的monorepo项目中，开发者经常面临如何在多个Next.js应用之间共享和扩展TRPC路由的挑战。本文将深入探讨这一问题的解决方案，帮助开发者构建更灵活、可维护的架构。

核心问题分析

在典型的monorepo结构中，我们通常会遇到以下需求：

1. 共享基础TRPC路由定义（如用户认证、公共数据等）
2. 允许各应用扩展自己的专属路由
3. 确保UI组件可以访问所需的路由端点

这种架构需求在以下场景特别常见：

• 多个应用共享70%以上的基础功能
• 每个应用有少量专属业务逻辑
• UI组件需要同时处理初始数据传递和后续数据更新

架构设计建议

1. 分层路由组织

推荐采用三层路由结构：

• 基础路由层（@acme/api）：包含所有应用共享的路由定义
• 应用扩展层（各应用内部）：包含应用专属路由
• 组合路由层：将基础路由与应用专属路由合并

2. 路由合并实现

在api包中创建灵活的路由组合机制：

// packages/api/src/root.ts
import { authRouter } from "./router/auth";
import { postRouter } from "./router/post";
import { createTRPCRouter } from "./trpc";

export const createAppRouter = (appSpecificRouter?: any) => {
  return createTRPCRouter({
    auth: authRouter,
    post: postRouter,
    ...(appSpecificRouter ? { app: appSpecificRouter } : {})
  });
};

3. 应用侧实现

在各Next.js应用中扩展路由：

// apps/app1/src/trpc/appRouter.ts
import { createAppRouter } from "@acme/api";
import { customRouter } from "./customRouter";

export const appRouter = createAppRouter(customRouter);
export type AppRouter = typeof appRouter;

组件数据访问策略

对于需要在UI组件中访问TRPC的情况，建议采用以下模式：

1. 容器组件模式：在应用层创建容器组件，处理数据获取逻辑
2. 属性传递：将初始数据通过props传递给纯UI组件
3. 回调机制：提供数据更新回调方法

// 共享组件示例
function SharedTable({ initialData, onRefresh }) {
  const [data, setData] = useState(initialData);
  
  const handleRefresh = async () => {
    const newData = await onRefresh();
    setData(newData);
  };
  
  return (
    <>
      <Table data={data} />
      <Button onClick={handleRefresh}>刷新</Button>
    </>
  );
}

进阶优化建议

1. 类型安全扩展：使用泛型增强路由组合的类型安全
2. 懒加载路由：对大型路由实现按需加载
3. 中间件共享：在基础路由中统一处理认证、日志等横切关注点
4. 版本控制：为路由变更设计版本兼容机制

总结

在create-t3-turbo项目中实现多应用TRPC路由共享与扩展，关键在于建立清晰的架构分层和灵活的合并机制。通过将基础路由定义在共享包中，同时允许各应用扩展专属路由，开发者可以构建既保持一致性又具备灵活性的后端API层。配合合理的前端数据访问策略，这种架构能够有效支持复杂monorepo项目的长期演进。