nextjs.mdc

---
description: Next.js 结合 TypeScript 和 Tailwind UI 的最佳实践
globs: **/*.tsx, **/*.ts, src/**/*.ts, src/**/*.tsx
---

# Next.js 最佳实践

## 项目结构
- 使用 App Router 目录结构
- 将特定于路由的组件放置在 `app` 目录中
- 将共享组件放置在 `components` 目录中
- 将实用程序和辅助函数放置在 `lib` 目录中
- 目录使用小写字母和短横线（例如 `components/auth-wizard`）

## 组件
- 默认使用服务器组件 (Server Components)
- 使用 'use client' 明确标记客户端组件
- 将客户端组件包裹在带有名为 `fallback` 的 Suspense 中
- 对非关键组件使用动态加载
- 实现正确的错误边界 (Error Boundaries)
- 将静态内容和接口放在文件末尾

## 性能
- 优化图片：使用 WebP 格式、尺寸数据、懒加载
- 最小化 'useEffect' 和 'setState' 的使用
- 尽可能优先使用服务器组件 (RSC)
- 对非关键组件使用动态加载
- 实现正确的缓存策略

## 数据获取
- 尽可能使用服务器组件进行数据获取
- 实现正确的数据获取错误处理
- 使用适当的缓存策略
- 适当地处理加载和错误状态

## 路由
- 使用 App Router 的约定
- 为路由实现正确的加载和错误状态
- 适当地使用动态路由
- 需要时处理并行路由

## 表单和验证
- 使用 Zod 进行表单验证
- 实现正确的服务器端验证
- 适当地处理表单错误
- 在表单提交期间显示加载状态

## 状态管理
- 最小化客户端状态
- 谨慎使用 React Context
- 尽可能优先使用服务器状态
- 实现正确的加载状态