A set of Next.js and React conventions, such as keeping page.tsx a server component and the hooks to use, for coding agents to follow.
# Next.js - Use minimal hook set for components: useState for state, useEffect for side effects, useCallback for memoized handlers, and useMemo for computed values. Confidence: 0.85 - Never make page.tsx a client component. All client-side logic lives in components under /components, and page.tsx stays a server component. Confidence: 0.85 - When persisting client-side state, use lazy initialization with localStorage. Confidence: 0.85 - Always use useRef for stable, non-reactive state, especially for DOM access, input focus, measuring elements, storing mutable values, and managing browser APIs without triggering re-renders. Confidence: 0.85 - Use sr-only classes for accessibility labels. Confidence: 0.85 - Always use shadcn/ui as the component system for Next.js projects. Confidence: 0.85 - When setting up shadcn/ui, ensure globals.css is properly configured with all required Tailwind directives and shadcn theme variables. Confidence: 0.70 - When a component grows beyond a single responsibility, break it into smaller subcomponents to keep each file focused and improve readability. Confidence: 0.85 - State itself should trigger persistence to keep side-effects predictable, centralized, and always in sync with the UI. Confidence: 0.85 - Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state. Confidence: 0.85
# Next.js - 使用最少的 Hook 集合来构建组件:使用 useState 管理状态,useEffect 处理副作用,useCallback 缓存事件处理器,useMemo 计算派生值。置信度:0.85 - 永远不要将 page.tsx 设为客户端组件。所有客户端逻辑应位于 /components 目录下的组件中,而 page.tsx 应始终保持为服务器组件。置信度:0.85 - 在持久化客户端状态时,使用 localStorage 进行惰性初始化。置信度:0.85 - 始终使用 useRef 来管理稳定且非响应式的状态,特别是用于 DOM 访问、输入框聚焦、元素测量、存储可变值以及管理浏览器 API,且不触发重新渲染。置信度:0.85 - 使用 sr-only 类来实现无障碍访问标签。置信度:0.85 - 在 Next.js 项目中始终使用 shadcn/ui 作为组件系统。置信度:0.85 - 在配置 shadcn/ui 时,确保 globals.css 正确配置了所有必需的 Tailwind 指令和 shadcn 主题变量。置信度:0.70 - 当组件职责超过单一功能时,应将其拆分为更小的子组件,以保持每个文件职责单一,提升可读性。置信度:0.85 - 状态本身应触发持久化操作,以确保副作用可预测、集中管理,并始终与 UI 保持同步。置信度:0.85 - 使用函数式更新方式从先前状态派生新状态,以避免闭包过期问题,并确保获取最准确的状态版本。置信度:0.85