Nextjs Project Standard

Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。

Security Scan

这是一个仅包含 Next.js 14+ 项目规范的说明性技能，没有请求凭据或安装动作，其声明与实际内容一致。

Purpose & Capability

技能名称与描述（Next.js 项目规范）与 SKILL.md 内容一致；没有请求与用途不符的权限、环境变量或二进制依赖。

Instruction Scope

SKILL.md 只是静态、面向最佳实践的指南（项目结构、渲染模式、数据获取、中间件、SEO 等），不包含运行时命令、文件读取或外部网络调用指示。但说明较高层、未明确规定代理在“自动激活”时应如何具体修改或验证代码；建议审查代理实际执行的更改。

Install Mechanism

无安装规范（instruction-only），不会在主机上写入或执行外部下载，安装风险最低。

Credentials

不要求任何环境变量、凭据或配置路径；没有不相称的凭据请求。

Persistence & Privilege

flags 显示 always:false（未被强制常驻），允许模型自主调用（平台默认），在没有额外权限或凭据的情况下这点可接受。

Assessment

此技能本质上是一本 Next.js 开发规范说明：内部一致且不请求凭据或安装外部代码，因此从‘目的—能力’角度是合理的。注意两点：1) 来源与主页信息缺失——如果你对来源敏感，请优先使用已知、受信任来源或把这些规则内嵌到你的仓库（如 ESLint/CI 检查、代码审查流程）；2) 虽然技能本身不含执行命令，但平台允许模型在触发时自动调用——确认代理在应用这些规范时会通过可审查的变更（Pull Request 或用户确认）而不是静默修改生产代码。若你希望更强的安全性，要求技能公开作者/主页或改为把规范作为仅供参考的非自动化插件。

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