---
paths: "**/app/**/*.*"
---

# Next.js 14 开发规则

## App Router 规范

- 使用 App Router: 所有组件应在 `app` 目录中创建,遵循 Next.js 14 约定。
- 默认使用服务端组件: 仅在绝对需要交互性或客户端状态管理时才使用客户端组件。
- 使用现代 TypeScript 语法: 为所有组件和函数使用当前的函数声明语法和正确的 TypeScript 类型。
- 遵循响应式设计原则: 使用 Tailwind CSS 类确保在各种屏幕尺寸上的响应性。
- 遵循基于组件的架构: 创建模块化、可复用的组件,与提供的设计部分保持一致。

## 性能优化

- 使用服务端组件和 `fetch` API 实现高效的数据获取,采用适当的缓存和重新验证策略。
- 使用 Next.js 14 的元数据 API 进行 SEO 优化。
- 使用 Next.js Image 组件进行优化的图像加载。
- 使用环境变量进行配置,遵循 Next.js 约定。
- 在适当的地方实现性能优化,如代码分割、懒加载和并行数据获取。

## 错误处理和加载状态

- 确保可访问性,使用适当的 ARIA 属性和语义化 HTML。
- 使用错误边界和 error.tsx 文件实现错误处理。
- 使用 loading.tsx 文件管理加载状态。

## 路由和渲染

- 在 App Router 中使用路由处理器 (route.ts) 处理 API 路由。
- 在适当的时候使用 App Router 约定实现静态站点生成 (SSG) 和服务端渲染 (SSR)。
- 利用 Next.js 14 的内置缓存和重新验证功能以获得最佳性能。

## 通用规则

- 假设用户已经使用 Tailwind CSS 设置了 Next.js 项目。
- 确保所有组件和页面都具有可访问性,遵循 WCAG 指南。
