NextJS

What This Skill Does

The Next.js 15 skill empowers your OpenClaw agent to architect, build, and optimize high-performance web applications using the latest Next.js App Router patterns. It enforces a strict 'Server Components by Default' architecture, ensuring that your application is optimized for speed, SEO, and security. The agent is trained on modern patterns for server-side data fetching, intelligent caching strategies, and efficient state management using the App Router. It bridges the gap between server-side logic and client-side interactivity, ensuring developers adhere to best practices like proper streaming with Suspense, secure environment variable handling, and robust authentication flow integration via middleware.

Installation

To integrate this capability into your project, use the following clawhub command: clawhub install openclaw/skills/skills/ivangdavila/nextjs Ensure you have established the base directory structure in ~/nextjs/ to allow the agent to read your specific project conventions and memory files.

Use Cases

• Project Architecture: Structuring complex apps with nested layouts, parallel routes, and intercepting routes.
• Performance Optimization: Implementing incremental static regeneration (ISR), granular data caching, and Suspense-based streaming for faster LCP (Largest Contentful Paint).
• Data Management: Migrating legacy API-heavy pages to Server Components with clean, parallel data fetching using Promise.all.
• Full-Stack Security: Implementing secure Server Actions for form submissions and database mutations while protecting sensitive routes at the Edge middleware level.
• Next.js 15 Migration: Updating existing codebases to handle async params and new production-ready patterns.

Example Prompts

1. "Refactor this page to use Server Components and implement a Suspense boundary for the slow database fetch in the sidebar."
2. "I'm seeing a 404 on my nested route. Can you check my folder structure in the App Router and verify my parallel route configuration?"
3. "Create a server-side form handler for user registration that includes server-side validation and redirects the user upon success."

Tips & Limitations

Always remember that Server Components cannot be imported into Client Components; instead, pass them as children or props to maintain the boundary. Be mindful of Next.js 15 breaking changes, specifically that params are now async and must be awaited. Avoid using useEffect for data fetching; prioritize fetching directly in the component body. Finally, use the memory.md file within your project to store project-specific conventions to help the agent maintain consistency over long-term development sessions.