技能详情（站内镜像，无评论）
作者：Bovin Phang @bovinphang
许可证：MIT-0
MIT-0 ·免费使用、修改和重新分发。无需归因。
版本：v1.0.0
统计：⭐ 0 · 22 · 1次当前安装· 1次历史安装
⭐ 0
安装量（当前） 1
🛡 VirusTotal ：良性 · OpenClaw ：良性
Package：bovinphang/nextjs-project-standard
安全扫描（ClawHub）
- VirusTotal ：良性
- OpenClaw ：良性
OpenClaw 评估
这是一个仅包含 Next.js 14+ 项目规范的说明性技能，没有请求凭据或安装动作，其声明与实际内容一致。
目的
技能名称与描述（Next.js 项目规范）与 SKILL.md 内容一致；没有请求与用途不符的权限、环境变量或二进制依赖。
说明范围
SKILL.md 只是静态、面向最佳实践的指南（项目结构、渲染模式、数据获取、中间件、SEO 等），不包含运行时命令、文件读取或外部网络调用指示。但说明较高层、未明确规定代理在“自动激活”时应如何具体修改或验证代码；建议审查代理实际执行的更改。
安装机制
无安装规范（instruction-only），不会在主机上写入或执行外部下载，安装风险最低。
证书
不要求任何环境变量、凭据或配置路径；没有不相称的凭据请求。
持久
flags 显示 always:false（未被强制常驻），允许模型自主调用（平台默认），在没有额外权限或凭据的情况下这点可接受。
综合结论
此技能本质上是一本 Next.js 开发规范说明：内部一致且不请求凭据或安装外部代码，因此从‘目的—能力’角度是合理的。注意两点：1) 来源与主页信息缺失——如果你对来源敏感，请优先使用已知、受信任来源或把这些规则内嵌到你的仓库（如 ESLint/CI 检查、代码审查流程）；2) 虽然技能本身不含执行命令，但平台允许模型在触发时自动调用——确认代理在应用这些规范时会通过可审查的变更（Pull Request 或用户确认）而不是静默修改生产代码。若你希望更强的安全性，要求技能公开作者/主页或改为把规范作为仅供参考的非自动化插件。
安装（复制给龙虾 AI）
将下方整段复制到龙虾中文库对话中，由龙虾按 SKILL.md 完成安装。
请把本段交给龙虾中文库（龙虾 AI）执行：为本机安装 OpenClaw 技能「Nextjs Project Standard」。简介：Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.j…。
请 fetch 以下地址读取 SKILL.md 并按文档完成安装：https://raw.githubusercontent.com/openclaw/skills/refs/heads/main/skills/bovinphang/nextjs-project-standard/SKILL.md
（来源：yingzhi8.cn 技能库）SKILL.md
---
name: nextjs-project-standard
description: Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。
version: 1.0.0
---
# Next.js 项目规范
适用于使用 Next.js 14+ 与 App Router 的仓库。
## 适用场景
- 新建或修改 App Router 页面
- 配置 SSR / SSG / ISR
- 使用流式渲染、Suspense
- 数据获取、缓存、中间件
- 元数据与 SEO
## 项目结构
```
src/
├── app/ # App Router
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ ├── loading.tsx # 全局 loading UI
│ ├── error.tsx # 全局错误边界
│ ├── not-found.tsx # 404
│ ├── globals.css
│ │
│ ├── (auth)/ # 路由组
│ │ ├── login/
│ │ │ └── page.tsx
│ │ └── register/
│ │ └── page.tsx
│ │
│ ├── (dashboard)/ # 仪表盘路由组
│ │ ├── layout.tsx # 共享布局
│ │ ├── dashboard/
│ │ │ └── page.tsx
│ │ └── users/
│ │ ├── page.tsx
│ │ └── [id]/
│ │ └── page.tsx
│ │
│ └── api/ # API Routes
│ └── users/
│ └── route.ts
│
├── components/ # 共享组件
├── lib/ # 工具、配置
├── hooks/
├── services/
└── types/
```
## 渲染模式
| 模式 | 使用场景 | 实现方式 |
|------|----------|----------|
| **SSR** | 动态、需实时数据 | 默认，`fetch` 不缓存或 `cache: 'no-store'` |
| **SSG** | 静态内容 | `generateStaticParams` + 静态 `fetch` |
| **ISR** | 定期更新 | `revalidate` 或 `revalidatePath` |
| **CSR** | 客户端交互 | `'use client'` + `useEffect` 或 SWR/React Query |
## 数据获取
- 服务端组件：直接 `async` 或 `fetch`，不暴露 `useEffect`
- 客户端组件：`useEffect` + `useState`，或 SWR / React Query
- 优先在服务端获取数据，减少客户端水合
- 使用 `loading.tsx` 和 Suspense 包裹异步区块，提供流式体验
## 路由与布局
- 路由组 `(auth)` 不改变 URL，只影响布局
- 动态路由 `[id]` 配合 `generateStaticParams` 做 SSG
- `layout.tsx` 包裹子路由，共享 UI 与布局
- `page.tsx` 为叶子路由，不可嵌套
## 中间件
- 放在 `middleware.ts` 根目录
- 用于鉴权、重定向、rewrite、Header 修改
- 尽量短小，避免阻塞请求
## 元数据与 SEO
- 使用 `metadata` 或 `generateMetadata` 导出
- 支持 `title`、`description`、`openGraph`、`twitter` 等
- 动态路由用 `generateMetadata(params)` 生成
## 强约束
- 服务端组件默认，仅在需要客户端交互时加 `'use client'`
- 不在服务端组件中直接使用 `useState`、`useEffect`、浏览器 API
- 敏感逻辑（如鉴权）放在服务端或 API Route，不暴露在客户端
- 图片使用 `next/image`，字体使用 `next/font`