SG-001Mục đích: Thiết kế

Vercel + TanStack Start + Nx — design seams

#vercel#tanstack-start#tanstack-router#nitro#pnpm#nx#monorepo#zustand
Kiểm mục
  • TanStack Router file routes under apps/{project}/src/routes/ — typed routeTree
  • Shareable filters in router search params, not Zustand
  • Zustand for UI chrome only (theme, locale, overlays)
  • Loaders call {feature}.fns.ts at route boundary; thin page components
  • Feature modules: {feature}.fns.ts → {feature}.service.server.ts → repository
  • No Prisma client imports in React components
  • MCP at /mcp imports service in-process — no public REST catalog API

Routing seams

Seam

Use TanStack Router file routes under apps/{project}/src/routes/. Shareable list/filter state lives in router search params — not client stores.

Loader functions call {feature}.fns.ts at the route boundary; page components stay thin. Commit routeTree.gen.ts in CI — do not strip route files via unanchored .vercelignore patterns.

State & stores

Seam

Zustand owns UI chrome only: theme, locale, overlays. Cross-route filter state belongs in the URL (?q=, ?filter=).

Avoid duplicating URL state in a store — drift between address bar and store causes subtle bugs on refresh and share links.

Module boundaries

Seam

Split by feature module under apps/{project}/src/lib/<feature>/ — dot-suffix files: {feature}.fns.ts, {feature}.service.server.ts, {feature}.repository.server.ts (e.g. knowledge.fns.ts).

UI/routes import only {feature}.fns.ts (+ {feature}.types.ts for props). Service is the read seam; MCP tools and server functions are transport adapters. No Prisma in components.