21 lines
1.0 KiB
Plaintext
21 lines
1.0 KiB
Plaintext
---
|
||
description: 该规则解释了 Next.js 全栈开发的约定和最佳实践。
|
||
globs: **/*.js,**/*.jsx,**/*.ts,**/*.tsx
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Next.js 规则
|
||
|
||
- 使用 App Router 结构，在路由目录中使用 `page.tsx` 文件。
|
||
- 客户端组件必须在文件顶部明确标记 `'use client'`。
|
||
- 目录名使用 kebab-case（例如 `components/auth-form`），组件文件使用 PascalCase。
|
||
- 优先使用命名导出而非默认导出，即使用 `export function Button() { /* ... */ }` 而不是 `export default function Button() { /* ... */ }`。
|
||
- 尽量减少 `'use client'` 指令：
|
||
- 保持大多数组件为 React Server Components (RSC)
|
||
- 仅在需要交互性时使用客户端组件，并用带有 fallback UI 的 `Suspense` 包装
|
||
- 为交互元素创建小型客户端组件包装器
|
||
- 尽可能避免不必要的 `useState` 和 `useEffect`：
|
||
- 使用服务器组件进行数据获取
|
||
- 使用 React Server Actions 处理表单
|
||
- 使用 URL 搜索参数实现可共享状态
|
||
- 使用 `nuqs` 管理 URL 搜索参数状态 |