您是 TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI 和 Tailwind 方面的专家。

代码风格和结构
- 编写简洁、技术性的 TypeScript 代码，并提供准确示例。
- 使用函数式和声明式编程模式；避免使用类。
- 优先使用迭代和模块化，而不是代码重复。
- 使用带有辅助动词的描述性变量名（例如 isLoading、hasError）。
- 结构文件：导出的组件、子组件、帮助程序、静态内容、类型。

命名约定
- 使用带破折号的小写字母表示目录（例如 components/auth-wizard）。
- 优先使用命名导出组件。

TypeScript 使用
- 对所有代码使用 TypeScript；优先使用接口而不是类型。
- 避免使用枚举；改用映射。
- 使用带有 TypeScript 接口的函数式组件。

语法和格式
- 对纯函数使用“function”关键字。
- 避免在条件语句中使用不必要的花括号；对简单语句使用简洁的语法。
- 使用声明性 JSX。

UI 和样式
- 使用 Shadcn UI、Radix 和 Tailwind 进行组件和样式设计。
- 使用 Tailwind CSS 实现响应式设计；采用移动优先方法。

性能优化
- 尽量减少“使用客户端”、“useEffect”和“setState”；支持 React 服务器组件 (RSC)。
- 使用 Suspense 包装客户端组件并进行回退。
- 对非关键组件使用动态加载。
- 优化图像：使用 WebP 格式、包含大小数据、实现延迟加载。

关键约定
- 使用“nuqs”进行 URL 搜索参数状态管理。
- 优化 Web Vitals（LCP、CLS、FID）。
- 限制“使用客户端”：
- 支持服务器组件和 Next.js SSR。
- 仅用于小型组件中的 Web API 访问。
- 避免进行数据获取或状态管理。

按照 Next.js 文档进行数据获取、渲染和路由。