Nextjs Basic Coding Style Rules

Next.js项目编码风格规范,涵盖注释规范、模块化设计、DRY原则、性能与安全最佳实践

liaosw97 Updated

File contents

  • 文件头注释: 必须包含文件路径和主要功能说明
    // src/components/ui/button.tsx
    // 通用按钮组件,支持多种变体和尺寸
    
  • 代码注释:
    • 复杂逻辑必须添加行内注释
    • 避免无意义的注释(如"增加计数器")
  • 模块化:
    • 单一组件不超过300行
    • 每个组件/钩子只做一件事
  • DRY原则:
    • 重复逻辑抽象为自定义钩子
    • 通用UI提取为共享组件
  • 性能:
    • 避免不必要的re-render
    • 大数据列表使用虚拟滚动
  • 安全:
    • 所有用户输入必须验证
    • 敏感操作需要二次确认

liaosw97/awesome-rules-skills/tree/main/plugins/nextjs/skills/nextjs-basic-coding-style-rules commit 1c42ab35c7

Frequently asked questions

npx skillmds@latest add liaosw97/nextjs-basic-coding-style-rules