nextjs-developer by jeffallan/claude-skills
npx skills add https://github.com/jeffallan/claude-skills --skill nextjs-developer资深 Next.js 开发者,精通 Next.js 14+ App Router、服务器组件以及全栈部署,专注于性能和 SEO 优化。
next build,确认零类型错误,检查 NEXT_PUBLIC_* 和仅服务器端环境变量是否已设置,运行 Lighthouse/PageSpeed 确认核心 Web 指标 > 90根据上下文加载详细指导:
| 主题 | 参考 | 加载时机 |
|---|---|---|
| App Router | references/app-router.md | 基于文件的路由、布局、模板、路由组 |
| 服务器组件 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/server-components.md |
| RSC 模式、流式渲染、客户端边界 |
| 服务器操作 | references/server-actions.md | 表单处理、数据变更、重新验证 |
| 数据获取 | references/data-fetching.md | fetch、缓存、ISR、按需重新验证 |
| 部署 | references/deployment.md | Vercel、自托管、Docker、优化 |
app/ 目录),绝不使用 Pages Router (pages/)'use client'fetch 并明确指定 cache / next.revalidate 选项 — 不要依赖隐式缓存generateMetadata(或静态 metadata 导出)— 绝不要在 JSX 中硬编码 <title> 或 <meta> 标签next/image 优化每张图片;对于内容图片,绝不使用普通的 <img> 标签loading.tsx 和 error.tsxloading.tsx/error.tsx 边界next build 确认零错误就进行部署// app/products/page.tsx
import { Suspense } from 'react'
async function ProductList() {
// 每 60 秒重新验证一次 (ISR)
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 60 },
})
if (!res.ok) throw new Error('Failed to fetch products')
const products: Product[] = await res.json()
return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
)
}
export default function Page() {
return (
<Suspense fallback={<p>Loading…</p>}>
<ProductList />
</Suspense>
)
}
// app/products/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
export async function createProduct(formData: FormData) {
const name = formData.get('name') as string
await db.product.create({ data: { name } })
revalidatePath('/products')
}
// app/products/new/page.tsx
import { createProduct } from '../actions'
export default function NewProductPage() {
return (
<form action={createProduct}>
<input name="name" placeholder="Product name" required />
<button type="submit">Create</button>
</form>
)
}
// app/products/[id]/page.tsx
import type { Metadata } from 'next'
export async function generateMetadata(
{ params }: { params: { id: string } }
): Promise<Metadata> {
const product = await fetchProduct(params.id)
return {
title: product.name,
description: product.description,
openGraph: { title: product.name, images: [product.imageUrl] },
}
}
实现 Next.js 功能时,请提供:
next.config.js、TypeScript)Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment
每周安装量
1.3K
代码仓库
GitHub 星标
7.3K
首次出现
2026年1月20日
安全审计
安装于
opencode1.1K
gemini-cli1.1K
codex1.0K
github-copilot1.0K
cursor934
amp910
Senior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.
next build locally, confirm zero type errors, check NEXT_PUBLIC_* and server-only env vars are set, run Lighthouse/PageSpeed to confirm Core Web Vitals > 90Load detailed guidance based on context:
| Topic | Reference | Load When |
|---|---|---|
| App Router | references/app-router.md | File-based routing, layouts, templates, route groups |
| Server Components | references/server-components.md | RSC patterns, streaming, client boundaries |
| Server Actions | references/server-actions.md | Form handling, mutations, revalidation |
| Data Fetching | references/data-fetching.md | fetch, caching, ISR, on-demand revalidation |
| Deployment | references/deployment.md | Vercel, self-hosting, Docker, optimization |
app/ directory), never Pages Router (pages/)'use client' only at the leaf boundary where interactivity is requiredfetch with explicit cache / next.revalidate options — do not rely on implicit cachinggenerateMetadata (or the static metadata export) for all SEO — never hardcode <title> or <meta> tags in JSXloading.tsx/error.tsx boundaries on async route segmentsnext build to confirm zero errors// app/products/page.tsx
import { Suspense } from 'react'
async function ProductList() {
// Revalidate every 60 seconds (ISR)
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 60 },
})
if (!res.ok) throw new Error('Failed to fetch products')
const products: Product[] = await res.json()
return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
)
}
export default function Page() {
return (
<Suspense fallback={<p>Loading…</p>}>
<ProductList />
</Suspense>
)
}
// app/products/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
export async function createProduct(formData: FormData) {
const name = formData.get('name') as string
await db.product.create({ data: { name } })
revalidatePath('/products')
}
// app/products/new/page.tsx
import { createProduct } from '../actions'
export default function NewProductPage() {
return (
<form action={createProduct}>
<input name="name" placeholder="Product name" required />
<button type="submit">Create</button>
</form>
)
}
// app/products/[id]/page.tsx
import type { Metadata } from 'next'
export async function generateMetadata(
{ params }: { params: { id: string } }
): Promise<Metadata> {
const product = await fetchProduct(params.id)
return {
title: product.name,
description: product.description,
openGraph: { title: product.name, images: [product.imageUrl] },
}
}
When implementing Next.js features, provide:
next.config.js, TypeScript)Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment
Weekly Installs
1.3K
Repository
GitHub Stars
7.3K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.1K
gemini-cli1.1K
codex1.0K
github-copilot1.0K
cursor934
amp910
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
Trail of Bits 测试手册技能生成器 - 自动化创建安全测试AI技能工具
1,100 周安装
Wycheproof 密码学测试工具:验证实现正确性,检测已知漏洞
1,100 周安装
网页内容提取器 - 智能URL转Markdown工具,支持JS渲染与反爬虫网站
1,100 周安装
React 19专家 | 服务器组件、性能优化与生产级架构实战指南
1,100 周安装
macOS应用公证完整指南:使用App Store Connect CLI进行开发者ID签名与公证
1,100 周安装
高级架构师工具包:自动化架构图生成、项目分析与依赖管理最佳实践
1,100 周安装
next/image; never use a plain <img> tag for content imagesloading.tsx and error.tsx at every route segment that performs async data fetching