一键在 Manus 中运行任何 Skill

nextjs-expert

星标22

分支3

更新时间2026年5月15日 04:37

Next.js 14+ gotchas and decision criteria. Covers server/client boundary, caching strategy, and data fetching patterns Claude commonly gets wrong.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

nguyenthienthanh

nguyenthienthanh/aura-frog

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Next.js Expert — Gotchas & Decisions

Use Context7 for full Next.js docs.

Key Decisions

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"

Gotchas

Server Components can't use useState/useEffect — move interactive parts to a child Client Component
'use client' makes ALL imports in that file client-side — keep it at leaf components
fetch() in Server Components is auto-deduped but only within same render pass
Server Actions: always validate with Zod — formData comes from untrusted client
error.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
Dynamic routes [slug]: params are now a Promise in Next.js 15 — await params
revalidatePath('/') revalidates ALL pages, not just home — use revalidateTag for precision
Image: always provide sizes prop with fill — without it, Next.js sends full-size image
Middleware runs on Edge: no Node.js APIs (fs, Buffer, etc.)

同仓库更多 Skills

同仓库

agent-detector

nguyenthienthanh/aura-frog

CRITICAL: MUST run for EVERY message. Detects agent, complexity, AND model automatically. Without this, tasks route to wrong agents and use wrong models, degrading quality and wasting tokens.

2026-06-1022

problem-solving

nguyenthienthanh/aura-frog

5 techniques for different problem types. Use when stuck or facing complex challenges.

2026-06-1022

sequential-thinking

nguyenthienthanh/aura-frog

Structured thinking process for complex analysis. Supports revision, branching, and dynamic adjustment.

2026-06-1022

angular-expert

nguyenthienthanh/aura-frog

Angular 17+ gotchas and decision criteria. Covers signals vs observables, standalone patterns, and common pitfalls Claude gets wrong.

2026-05-1522

api-designer

nguyenthienthanh/aura-frog

Designs RESTful APIs with endpoint naming, versioning strategies (URL path, header-based), pagination (offset and cursor), error response schemas, and OpenAPI conventions. Use when the user asks about REST API design, creating endpoints, URL structure, API versioning, status codes, Swagger, or OpenAPI specs.

2026-05-1522

bugfix-quick

nguyenthienthanh/aura-frog

Fast bug fixes with root cause investigation + TDD. Enforces 'no fix without root cause' discipline and verification protocol. Without this skill, fixes are applied at symptoms instead of sources, and bugs return.

2026-05-1522

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 docs/architecture/HIERARCHICAL_PLANNING.md or docs/getting-started/ depending on topic.

Next.js Expert — Gotchas & Decisions

Use Context7 for full Next.js docs.

Key Decisions

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"

Gotchas

Server Components can't use useState/useEffect — move interactive parts to a child Client Component
'use client' makes ALL imports in that file client-side — keep it at leaf components
fetch() in Server Components is auto-deduped but only within same render pass
Server Actions: always validate with Zod — formData comes from untrusted client
error.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
Dynamic routes [slug]: params are now a Promise in Next.js 15 — await params
revalidatePath('/') revalidates ALL pages, not just home — use revalidateTag for precision
Image: always provide sizes prop with fill — without it, Next.js sends full-size image
Middleware runs on Edge: no Node.js APIs (fs, Buffer, etc.)