Stats
Actions
Tags
From godmode
Provides Next.js guidance on App Router architecture, Server/Client Components, data fetching, rendering strategies like SSG/SSR/ISR, Server Actions, and optimizations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/godmode:nextjsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- `/godmode:nextjs`, "Next.js", "App Router"
/godmode:nextjs, "Next.js", "App Router"cat next.config.* 2>/dev/null
ls app/ pages/ 2>/dev/null
grep "next" package.json 2>/dev/null
Router: App Router | Pages Router | Migration
Version: 13 | 14 | 15+
Rendering: mostly static | mostly dynamic | mixed
Auth: NextAuth | Clerk | Supabase Auth | custom
Deploy: Vercel | self-hosted | Docker
app/
layout.tsx # Root (metadata, providers)
loading.tsx / error.tsx / not-found.tsx
(marketing)/ # Route group (no URL segment)
page.tsx, about/, pricing/
(app)/ # Authenticated app group
layout.tsx (sidebar, nav)
dashboard/ (page, loading, error)
[workspace]/ (dynamic, [...slug]/)
api/ (route handlers)
Route groups (name) organize without URL impact.
Every segment: layout, loading, error optional.
Mark error.tsx as 'use client'.
DECISION: needs browser APIs, event handlers,
useState, useEffect, useContext?
YES -> 'use client'
NO -> Server Component (default)
PATTERNS:
Push 'use client' to leaf components
Composition: client wrapper, server children
Context provider at boundary
ANTI-PATTERNS:
'use client' on page.tsx or layout.tsx
Import server-only code in client components
Non-serializable props server -> client
'use server')Read data -> Server Component. Mutate -> Server Action. Real-time -> Client fetch + SWR/React Query.
SSG: static content. Default, generateStaticParams().
ISR: periodic refresh. revalidate: <seconds>.
SSR: fresh per request. force-dynamic, cookies().
Streaming: slow data. Suspense + loading.tsx.
Client: interactive/real-time. 'use client' + SWR.
IF can be static: SSG. IF periodic: ISR. IF per-request: SSR. IF slow parts: Streaming.
priority on LCP only. Always sizes.
fill for unknown dimensions. placeholder="blur".display: 'swap'.[ ] App Router used
[ ] 'use client' pushed to leaves
[ ] No 'use client' on pages/layouts
[ ] Server Actions for mutations
[ ] Parallel data fetching
[ ] loading.tsx for data routes
[ ] error.tsx for dynamic routes
[ ] next/image with sizes prop
[ ] Metadata API (not manual <head>)
<head>).Append .godmode/nextjs-results.tsv:
timestamp action routes server_components client_components audit notes
KEEP if: TTFB improved AND build passes
AND no 'use client' on page/layout.
DISCARD if: TTFB worsened OR build failed.
Never measure TTFB in dev mode.
STOP when ALL of:
- All routes TTFB < 200ms (p75)
- Client JS < 150KB gzipped
- All 'use client' at leaf level
- Rendering strategy matches data needs
On failure: git reset --hard HEAD~1. Never pause.
| Failure | Action |
|---|---|
| Build fails | Fix TS errors, missing imports |
| 'use client' on page | Extract interactive to leaf |
| Hydration mismatch | useEffect for client-only code |
| Server Action fails | Check 'use server', serializable args |
| Middleware loops | Check matcher exclusions |
npx claudepluginhub arbazkhan971/godmodeGuides building, debugging, and architecting Next.js App Router apps: routing, Server Components, Server Actions, layouts, middleware, data fetching, rendering strategies, Vercel deployment.
Guides Next.js App Router architecture, server/client boundaries, data fetching, caching, performance, and production operations. Use when building, reviewing, or debugging modern React/Next.js applications.
Reviews and guides Next.js 14+ App Router projects — file routes, layouts, server/client boundaries, rendering modes (SSR/SSG/ISR), streaming, metadata, middleware, and server actions.