# Nextjs Basic Coding Style Rules

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

- Skill: `liaosw97/nextjs-basic-coding-style-rules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/nextjs-basic-coding-style-rules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/nextjs-basic-coding-style-rules/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/nextjs-basic-coding-style-rules

---


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