メニュー
Next.js 14/15 App Router patterns — server components, data fetching, caching, server actions
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
When --quality-locked is active, loop review/revise at each Quality Gate until findings reach a clean bar (no Critical, no Major, only cosmetic Minor) or the iteration cap (10) is reached. Uses a deterministic Python checker for classification and decision logic; agent runs the actual review and revision steps.
Use after implementation passes the quality gates, when a change needs an independent pass over the code before it ships, or when the user asks to "QA this", "check the implementation", or "verify it matches the spec". Applies to Standard and Comprehensive scopes with the Task tool available; Lightweight tasks skip.
Use when the user picks [A] Review at a spec/plan/ADR/root-cause/fix-plan checkpoint, or asks for an independent review before implementation begins. Applies to Standard and Comprehensive scopes with the Task tool available; Lightweight tasks skip.
Use as the code-quality gate after spec-compliance and constitution checks pass, or when the user says "review my code", "quality check", "security review", or "is this code good". Runs as an independent sub-agent when the Task tool is available.
Adversarial review verifying implementation matches its specification — checks completeness (nothing missing) and precision (nothing extra). Distrusts the implementer's self-report. Use after implementation, or when the user says "check against spec", "does this match requirements", or "verify the implementation".
Configure Sage preset and project settings. Switch between base, startup, enterprise, or opensource constitution presets. Use when the user says "configure sage", "change preset", or "sage settings".
| name | nextjs |
| description | Next.js 14/15 App Router patterns — server components, data fetching, caching, server actions |
| version | 1.0.0 |
| type | knowledge |
| layer | framework |
| requires | {"sage":">=1.0.0","skills":["web","react"]} |
| activates-when | {"detected":["next","@supabase/ssr","@supabase/supabase-js","prisma","tailwindcss"]} |
| tags | ["next","supabase","prisma","tailwindcss","fullstack"] |
Layer 2 — Framework Pack
Next.js 14/15 App Router patterns. Server components, data fetching, caching, server actions, and the specific mistakes agents make from Pages Router training data contamination.
Next.js is where the "judgment not knowledge" principle matters most. The framework underwent a fundamental paradigm shift from Pages Router to App Router. Server components changed how data fetching works. Server actions changed how mutations work. The caching model changed between Next.js 14 and 15.
LLMs trained on pre-App-Router content produce code that technically runs but
uses wrong patterns — getServerSideProps in App Router projects, useEffect
for data fetching that should happen on the server, 'use client' on every
component because the agent doesn't understand the server-first model.
This pack establishes the App Router mental model as the default and explicitly corrects the most common Pages Router contamination patterns.
| Type | Files | Coverage |
|---|---|---|
| Patterns | 7 | Server components, data fetching, routing/layouts, server actions, caching, middleware, metadata |
| Anti-patterns | 5 | Pages Router patterns, use-client-everywhere, useEffect data fetching, client-side routing, wrong caching |
| Constitution | 1 | 6 Next.js-specific principles |
| Gate | 1 | Next.js pattern compliance check |
When installed alongside react, this pack overrides React's
data-fetching pattern. In Next.js, data fetching happens in server components,
not via TanStack Query in client components (unless you specifically need
client-side real-time data).
Server-first. Components are server components by default. They run on the
server, have direct access to databases and file systems, and ship zero JavaScript
to the browser. Only add 'use client' when you need interactivity (event handlers,
hooks, browser APIs). Most components (70-90% in a typical app) should remain
server components.
Next.js rarely ships alone. When a dependency below is detected, read the
matching integration reference — the cross-framework seams that neither tool's
own docs cover. These fold in the former stack-nextjs-supabase and
stack-nextjs-fullstack skills; the content is unchanged, now surfaced through
nextjs on detection.
@supabase/ssr / @supabase/supabase-js → integration/supabase-integration.md
— dual browser/server clients, middleware token refresh, RLS as authorization,
typed queries, Server Actions.
Constitution: constitution/supabase.constitution-additions.md ·
anti-patterns: anti-patterns/supabase-anti-patterns.md.prisma + tailwindcss (+ Auth.js) → integration/fullstack-integration.md
— Prisma client singleton, Auth.js × App Router middleware, Tailwind × server
components.
Constitution: constitution/fullstack.constitution-additions.md ·
anti-patterns: anti-patterns/fullstack-anti-patterns.md.