菜单
Next.js 14+ gotchas and decision criteria. Covers server/client boundary, caching strategy, and data fetching patterns Claude commonly gets wrong.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/nguyenthienthanh/aura-frog --skill nextjs-expert命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | nextjs-expert |
| description | Next.js 14+ gotchas and decision criteria. Covers server/client boundary, caching strategy, and data fetching patterns Claude commonly gets wrong. |
| autoInvoke | false |
| priority | high |
| triggers | ["nextjs","next.js","app router","server component"] |
| paths | ["app/**/*","pages/**/*","next.config.*","middleware.*"] |
| allowed-tools | Read, Grep, Glob, Edit, Write |
| user-invocable | false |
AI-consumed reference. Optimized for Claude to read during execution. Human-readable explanation: see or depending on topic.
Use Context7 for full Next.js docs.
decisions[4]{choice,use_when}:
Server vs Client,"Server by default. 'use client' ONLY for interactivity (useState/onClick). Push boundary as low as possible"
Cache strategy,"force-cache (static) | revalidate:N (time) | revalidateTag (on-demand) | no-store (always fresh)"
Server Actions vs API routes,"Actions for form mutations. API routes for external consumers/webhooks"
Streaming vs blocking,"Suspense wrap for slow data. Always Promise.all for parallel fetches"
'use client' makes ALL imports in that file client-side — keep it at leaf componentsfetch() in Server Components is auto-deduped but only within same render passerror.tsx MUST be a Client Component ('use client'). global-error.tsx must render <html> and <body>loading.tsx wraps page in Suspense — don't double-wrap with manual Suspense[slug]: params are now a Promise in Next.js 15 — await paramsrevalidatePath('/') revalidates ALL pages, not just home — use revalidateTag for precisionsizes prop with fill — without it, Next.js sends full-size imageVision feedback loop for UI — render the running UI, screenshot it across viewports + dark mode, run deterministic gates then a multimodal critique against the design system, and iterate until it passes. Use after building or changing a UI component/page, when asked to 'check the UI', make it 'look right', or verify a build matches a design spec / Stitch screen.
UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs.
Generate a cohesive color-token system from ONE OKLCH brand hue — primary/secondary/background/foreground/muted/border with semantic light + dark, emitted as a Tailwind v4 @theme block or a CSS-variables fallback. Use when starting a design system, defining brand colors, setting up theming/dark-mode, or replacing scattered hardcoded colors with a derived palette.