Complete Next.js 14+ guide with rules, skills, hooks, workflows, and AI agents for building production-ready applications
Comprehensive collection of rules, skills, hooks, workflows, and AI agents for building performant Next.js 14+ applications with App Router, React Server Components, and modern patterns.
Reference these resources when:
Core coding standards and patterns organized by priority:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 |
| Async Optimization |
| CRITICAL |
async- |
| 2 | Bundle Size | CRITICAL | bundle- |
| 3 | Server Performance | HIGH | server- |
| 4 | Client Optimization | MEDIUM | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Architecture | HIGH | architecture- |
Ready-to-use implementations:
use-debounce-hook.md - Custom debounce hook for search inputsapi-client-utility.md - Type-safe API client with error handlingSpecialized React hooks:
use-local-storage.md - Persistent state with localStorage syncStep-by-step guides:
feature-development.md - Complete feature development workflowSpecialized AI assistants:
nextjs-architect.md - Architecture decisions and design patternsasync-parallel - Use Promise.all() for independent data fetchingasync-suspense-boundaries - Stream content with Suspenseasync-defer-await - Move await into branches where usedbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-barrel-imports - Import directly, avoid barrel filesbundle-conditional - Load modules only when feature activatedserver-cache-react - Use React.cache() for per-request deduplicationserver-parallel-fetching - Restructure components to parallelize fetchesserver-auth-actions - Authenticate server actions like API routesclient-swr-dedup - Use SWR for automatic request deduplicationclient-event-listeners - Deduplicate global event listenersrerender-memo - Extract expensive work into memoized componentsrerender-dependencies - Use primitive dependencies in effectsrendering-content-visibility - Use content-visibility for long listsrendering-hydration-no-flicker - Use inline script for client-only dataarchitecture-avoid-boolean-props - Use composition instead of boolean propsarchitecture-compound-components - Structure complex components with contextRead individual rule files for detailed explanations:
rules/async-parallel.md
rules/server-component-patterns.md
rules/client-boundary-optimization.md
These are React-shared patterns. See ../reactjs/ templates:
../reactjs/skills/use-debounce-hook.md
../reactjs/skills/api-client-utility.md
../reactjs/hooks/use-local-storage.md
Follow step-by-step processes:
workflows/feature-development.md
Consult AI experts for specialized help:
agents/nextjs-architect.md
Each component contains:
Server Components (default):
Client Components ("use client"):
Preferred over API routes for mutations:
"use server"
export async function createPost(formData: FormData) {
// Validate, mutate, revalidate
await db.post.create(...)
revalidatePath('/posts')
}
{ next: { revalidate: 60 } }revalidatePath(), revalidateTag(){ cache: 'no-store' }