重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
nextjs-expert by oimiragieo/agent-studio
npx skills add https://github.com/oimiragieo/agent-studio --skill nextjs-expert在审查或编写代码时,请遵循以下准则:
在审查或编写代码时,请遵循以下准则:
app 目录内创建。fetch API 以及适当的缓存和重新验证策略来实现高效的数据获取。在审查或编写代码时,请遵循以下准则:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
此专家技能整合了 1 项独立技能:
app/ 目录)—— Pages Router 是遗留的;混合使用两者会产生冲突的渲染上下文并阻止服务器组件。'use client' —— 每个组件都是服务器组件,除非它需要浏览器 API、事件监听器或客户端状态;不必要的 'use client' 会抵消流式传输和服务器缓存。cookies()、headers()、params、searchParams)—— 同步访问在严格模式下会抛出错误并破坏 PPR 行为。error.tsx 和 loading.tsx —— 没有它们,错误会冒泡到根目录并卸载整个页面;段级文件支持细粒度的错误恢复和流式 UI。fill 和 sizes 的 next/image —— 在流体图像上硬编码宽度/高度会导致布局偏移,从而无法通过核心 Web 指标(CLS)。| 反模式 | 失败原因 | 正确方法 |
|---|---|---|
| 对新路由使用 Pages Router | 无法使用服务器组件、流式传输或缓存组件 | 对所有新路由使用 App Router(app/ 目录);逐步迁移 |
默认添加 'use client' | 强制客户端渲染;增加包大小;失去流式传输和缓存 | 保持仅服务器端;仅在需要浏览器 API 或事件处理程序时才添加 'use client' |
在 Next.js 15+ 中同步使用 cookies() / headers() | 在严格模式下抛出错误;破坏 PPR;已弃用的 API | 等待所有请求 API:const cookieStore = await cookies() |
| 对流体图像硬编码宽度/高度 | 布局偏移导致 CLS 核心 Web 指标失败 | 对流体容器使用 fill 和 sizes;仅对固定尺寸图像使用精确尺寸 |
路由段缺少 error.tsx | 错误冒泡到根目录;任何错误都会卸载整个页面 | 在每个段添加 error.tsx 和 loading.tsx;使用 Suspense 进行流式传输 |
开始前:
cat .claude/context/memory/learnings.md
完成后: 记录发现的任何新模式或例外情况。
假设中断:你的上下文可能会重置。如果它不在记忆中,那就没有发生过。
每周安装次数
65
仓库
GitHub 星标数
19
首次出现
2026年1月27日
安全审计
安装于
github-copilot62
gemini-cli61
codex61
opencode61
cursor61
amp60
When reviewing or writing code, apply these guidelines:
When reviewing or writing code, apply these guidelines:
app directory, following Next.js 14 conventions.fetch API with appropriate caching and revalidation strategies.When reviewing or writing code, apply these guidelines:
This expert skill consolidates 1 individual skills:
app/ directory) for all new Next.js 13+ routes — the Pages Router is legacy; mixing both creates conflicting rendering contexts and blocks Server Components.'use client' by default — every component is a Server Component unless it needs browser APIs, event listeners, or client state; unnecessary 'use client' negates streaming and server caching.cookies(), headers(), params, searchParams) in Next.js 15+ — synchronous access throws in strict mode and breaks PPR behavior.error.tsx and loading.tsx at route segments — without them, errors bubble to root and unmount the entire page; segment-level files enable granular error recovery and streaming UI.| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Using Pages Router for new routes | Cannot use Server Components, streaming, or cacheComponents | Use App Router (app/ directory) for all new routes; migrate incrementally |
Adding 'use client' by default | Forces client-side rendering; inflates bundle; loses streaming and caching | Keep server-only; add 'use client' only when browser APIs or event handlers are required |
Synchronous cookies() / headers() in Next.js 15+ | Throws in strict mode; breaks PPR; deprecated API | Await all Request APIs: const cookieStore = await cookies() |
Before starting:
cat .claude/context/memory/learnings.md
After completing: Record any new patterns or exceptions discovered.
ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.
Weekly Installs
65
Repository
GitHub Stars
19
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykFail
Installed on
github-copilot62
gemini-cli61
codex61
opencode61
cursor61
amp60
Vercel React 最佳实践指南 | Next.js 性能优化与代码规范
10,600 周安装
next/image with fill and sizes for fluid images — hard-coded width/height on fluid images causes layout shift that fails Core Web Vitals (CLS).| Hard-coded width/height on fluid images | Layout shifts fail CLS Core Web Vitals | Use fill with sizes for fluid containers; exact dimensions only for fixed-size images |
Missing error.tsx at route segments | Errors bubble to root; entire page unmounts on any error | Add error.tsx and loading.tsx at each segment; use Suspense for streaming |