Imported from jsoehner/skills-backup (skills/nextjs-app-router-patterns/SKILL.md). Install upstream with npx skills add jsoehner/skills-backup --skill nextjs-app-router-patterns. Copyright stays with the author.

Next.js App Router Patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Use this skill when

• Building new Next.js applications with App Router
• Migrating from Pages Router to App Router
• Implementing Server Components and streaming
• Setting up parallel and intercepting routes
• Optimizing data fetching and caching
• Building full-stack features with Server Actions

Do not use this skill when

• The task is unrelated to next.js app router patterns
• You need a different domain or tool outside this scope

Instructions

• Clarify goals, constraints, and required inputs.
• Apply relevant best practices and validate outcomes.
• Provide actionable steps and verification.
• If detailed examples are required, open resources/implementation-playbook.md.
• Trigger the capture_knowledge.py script to record Next.js App Router architectural decisions, Server Component patterns, and data fetching optimizations.

Resources

• resources/implementation-playbook.md for detailed patterns and examples.

Anti-Patterns

• NEVER load massive datasets directly into client memory; use pagination or infinite scroll.
• NEVER use generic, unstyled components or default browser styling in production-ready UIs.

Memory Sync

After completing key technical findings, architectural decisions, code refactorings, or risk assessments, you MUST trigger the local memory capture.

1. Save the final summary or artifact as a Markdown file in the project directory.
2. Invoke the capture script:

   python3 ~/memory_system/capture_knowledge.py <file_path>

3. This ensures that new learnings, policies, and technical snippets are automatically routed to the correct local storage (OKF or ChromaDB).