nextjs-best-practices by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill nextjs-best-practicesNext.js App Router 开发原则。
Does it need...?
│
├── useState, useEffect, event handlers
│ └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│ └── Server Component (default)
│
└── Both?
└── Split: Server parent + Client child
| 类型 | 用途 |
|---|---|
| 服务器组件 | 数据获取、布局、静态内容 |
| 客户端组件 | 表单、按钮、交互式 UI |
| 模式 | 用途 |
|---|---|
| 默认 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 静态(构建时缓存) |
| 重新验证 | ISR(基于时间刷新) |
| 无存储 | 动态(每次请求) |
| 来源 | 模式 |
|---|---|
| 数据库 | 服务器组件 fetch |
| API | 带缓存的 fetch |
| 用户输入 | 客户端状态 + 服务器操作 |
| 文件 | 用途 |
|---|---|
page.tsx | 路由 UI |
layout.tsx | 共享布局 |
loading.tsx | 加载状态 |
error.tsx | 错误边界 |
not-found.tsx | 404 页面 |
| 模式 | 用途 |
|---|---|
路由组 (name) | 组织但不影响 URL |
并行路由 @slot | 多个同级页面 |
拦截路由 (.) | 模态覆盖层 |
| 方法 | 用途 |
|---|---|
| GET | 读取数据 |
| POST | 创建数据 |
| PUT/PATCH | 更新数据 |
| DELETE | 删除数据 |
| 类型 | 用途 |
|---|---|
| 静态导出 | 固定元数据 |
| generateMetadata | 基于路由的动态元数据 |
| 层级 | 控制方式 |
|---|---|
| 请求 | fetch 选项 |
| 数据 | revalidate/标签 |
| 完整路由 | 路由配置 |
| 方法 | 用途 |
|---|---|
| 基于时间 | revalidate: 60 |
| 按需 | revalidatePath/Tag |
| 无缓存 | no-store |
| ❌ 不要 | ✅ 应该 |
|---|---|
| 到处使用 'use client' | 默认使用服务器组件 |
| 在客户端组件中获取数据 | 在服务器组件中获取数据 |
| 跳过加载状态 | 使用 loading.tsx |
| 忽略错误边界 | 使用 error.tsx |
| 打包过大的客户端包 | 使用动态导入 |
app/
├── (marketing)/ # 路由组
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # 仪表板布局
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
请记住: 服务器组件是默认选择是有原因的。从服务器组件开始,仅在需要时添加客户端组件。
此技能适用于执行概述中描述的工作流程或操作。
每周安装量
3.6K
代码仓库
GitHub 星标数
27.1K
首次出现
Jan 20, 2026
安全审计
安装于
opencode3.0K
gemini-cli3.0K
codex2.9K
github-copilot2.8K
cursor2.5K
amp2.4K
Principles for Next.js App Router development.
Does it need...?
│
├── useState, useEffect, event handlers
│ └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│ └── Server Component (default)
│
└── Both?
└── Split: Server parent + Client child
| Type | Use |
|---|---|
| Server | Data fetching, layout, static content |
| Client | Forms, buttons, interactive UI |
| Pattern | Use |
|---|---|
| Default | Static (cached at build) |
| Revalidate | ISR (time-based refresh) |
| No-store | Dynamic (every request) |
| Source | Pattern |
|---|---|
| Database | Server Component fetch |
| API | fetch with caching |
| User input | Client state + server action |
| File | Purpose |
|---|---|
page.tsx | Route UI |
layout.tsx | Shared layout |
loading.tsx | Loading state |
error.tsx | Error boundary |
not-found.tsx | 404 page |
| Pattern | Use |
|---|---|
Route groups (name) | Organize without URL |
Parallel routes @slot | Multiple same-level pages |
Intercepting (.) | Modal overlays |
| Method | Use |
|---|---|
| GET | Read data |
| POST | Create data |
| PUT/PATCH | Update data |
| DELETE | Remove data |
| Type | Use |
|---|---|
| Static export | Fixed metadata |
| generateMetadata | Dynamic per-route |
| Layer | Control |
|---|---|
| Request | fetch options |
| Data | revalidate/tags |
| Full route | route config |
| Method | Use |
|---|---|
| Time-based | revalidate: 60 |
| On-demand | revalidatePath/Tag |
| No cache | no-store |
| ❌ Don't | ✅ Do |
|---|---|
| 'use client' everywhere | Server by default |
| Fetch in client components | Fetch in server |
| Skip loading states | Use loading.tsx |
| Ignore error boundaries | Use error.tsx |
| Large client bundles | Dynamic imports |
app/
├── (marketing)/ # Route group
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # Dashboard layout
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
Remember: Server Components are the default for a reason. Start there, add client only when needed.
This skill is applicable to execute the workflow or actions described in the overview.
Weekly Installs
3.6K
Repository
GitHub Stars
27.1K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode3.0K
gemini-cli3.0K
codex2.9K
github-copilot2.8K
cursor2.5K
amp2.4K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装
SVG Logo Designer - AI 驱动的专业矢量标识设计工具,生成可缩放品牌标识
1,200 周安装