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

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

同类提示词