nextjs
Next.js App Router best practices — Server Components, data fetching, caching, routing, middleware, metadata, error handling, streaming, Server Actions, and performance optimization for Next.js 14-16+.
Why use this skill?
Master Next.js 14-16+ App Router development. Use this OpenClaw skill for architectural best practices, server components, data fetching, and performance optimization.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/nextjs-guidelinesWhat This Skill Does
The nextjs skill serves as an advanced architectural framework for the OpenClaw AI agent to assist in building, reviewing, and debugging Next.js App Router applications. It provides the agent with deep knowledge of the React Server Components (RSC) architecture, data fetching strategies, caching mechanisms, and routing conventions essential for Next.js 14-16+. By integrating this skill, the AI agent understands when to prioritize Server Components for performance, how to prevent data waterfalls, and how to structure file hierarchies using modern App Router conventions like parallel routes, intercepting routes, and specialized files such as loading.tsx, error.tsx, and layout.tsx. It helps transition developers from Pages Router patterns to the more efficient, streaming-first nature of App Router, ensuring that all code generated adheres to production-grade standards.
Installation
To enable this skill within your environment, execute the following command in your terminal:
npx clawhub@latest install nextjs
Use Cases
- Migrating legacy Pages Router applications to the modern App Router paradigm while ensuring optimal SEO and performance.
- Implementing complex data fetching patterns, including Server Actions for mutations and server-side DB access for reads to eliminate unnecessary API layers.
- Debugging common Next.js pain points, such as hydration mismatches, incorrect 'use client' directive placements, and problematic Suspense boundaries.
- Optimizing page load times by leveraging dynamic rendering, streaming, and efficient route-based caching strategies.
- Structuring multi-tenant or complex route architectures using route groups and nested layouts.
Example Prompts
- "Refactor my current data fetching logic in this page.tsx to move away from client-side useEffect and implement a direct Server Component pattern with proper loading states."
- "I am getting a hydration error on my dashboard; analyze my component tree and identify where the Server/Client boundary is incorrectly placed."
- "Explain the best approach to handle form submissions in Next.js using Server Actions instead of traditional API routes."
Tips & Limitations
Always prefer Server Components by default to keep the client bundle size small. Only use 'use client' when specific interactivity or browser-only APIs are required. Be mindful of caching; excessive use of dynamic rendering can increase server costs and latency. Use the provided file conventions strictly to allow the framework to optimize your assets automatically. Note that this skill primarily covers App Router; if you are working on a legacy Pages Router codebase, the agent will focus on migration strategies rather than maintenance of deprecated patterns.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wpank-nextjs-guidelines": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: code-execution
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.