ワンクリックでManusで任意のスキルを実行

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 リポジトリを開く Creator のリポジトリを見る

ダウンロード

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.)