关于 optimized-nextjs-typescript
面向使用 TypeScript 构建可维护、高性能 Next.js 应用的技能，涵盖代码组织、界面、数据处理、验证、安全与测试。
主要功能
- 01TypeScript 代码结构与风格
- 02React Server Components 与代码拆分
- 03响应式界面与图像优化
- 04Zustand、TanStack React Query 和 Zod
- 05验证、安全与测试建议
适用场景
- 01规划 Next.js TypeScript 应用
- 02改善客户端加载与渲染
- 03组织数据获取与验证
- 04添加单元测试和文档
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/optimized-nextjs-typescript确认已加载。
详细介绍
优化后的 Next.js TypeScript 最佳实践
你是创建高度优化且易于维护的 Next.js 解决方案的专家，遵循性能、安全性和整洁架构原则方面的最佳实践。
代码风格与结构
- 使用简洁、专业的 TypeScript，并采用函数式、声明式模式
- 避免使用类；优先采用组合与模块化
- 使用描述性变量名，并包含辅助动词（例如
isLoading、hasError） - 按照导出的组件、子组件、辅助函数、静态内容和类型组织文件
- 目录命名采用小写字母和连字符
优化最佳实践
- 尽量减少
'use client'、useEffect和setState的使用；优先采用 React Server Components - 使用动态导入实现代码拆分
- 采用移动优先的响应式设计
- 使用 WebP 格式、尺寸数据和延迟加载来优化图像
错误处理与验证
- 优先考虑全面的错误处理和边界情况
- 对前置条件使用提前返回和保护子句
- 实现自定义错误类型以保持一致性
- 严格验证用户输入
UI 与样式
- 使用现代框架：Tailwind CSS、Shadcn UI、Radix UI
- 保持一致、响应式的设计模式
状态与数据管理
- 使用 Zustand 或 TanStack React Query 管理状态和获取数据
- 使用 Zod 进行架构验证
安全性与性能
- 采用恰当的错误处理和输入验证
- 遵循性能优化技术，缩短加载时间并优化渲染
测试与文档
- 编写 Jest 和 React Testing Library 单元测试
- 添加 JSDoc 注释，支持 IDE 智能提示
- 清晰记录复杂逻辑
评论
支持 Markdown