تشغيل أي مهارة في Manus بنقرة واحدة

nextjs-expert

النجوم٢٢

التفرعات٣

آخر تحديث١٥ مايو ٢٠٢٦ في ٠٤:٣٧

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

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

SKILL.md

readonly

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

المزيد من هذا المستودع

نفس المستودع

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