nextjsBuild Next.js 15 apps with App Router, server components, caching, auth, and production patterns.
Install via ClawdBot CLI:
clawdbot install ivangdavila/nextjsOn first use, read setup.md for project integration.
User needs Next.js expertise — routing, data fetching, caching, authentication, or deployment. Agent handles App Router patterns, server/client boundaries, and production optimization.
Project patterns stored in ~/nextjs/. See memory-template.md for setup.
~/nextjs/
├── memory.md # Project conventions, patterns
└── projects/ # Per-project learnings| Topic | File |
|-------|------|
| Setup | setup.md |
| Memory template | memory-template.md |
| Routing (parallel, intercepting) | routing.md |
| Data fetching & streaming | data-fetching.md |
| Caching & revalidation | caching.md |
| Authentication | auth.md |
| Deployment | deployment.md |
Everything is Server Component in App Router. Add 'use client' only for useState, useEffect, event handlers, or browser APIs. Server Components can't be imported into Client — pass as children.
Fetch in Server Components, not useEffect. Use Promise.all for parallel requests. See data-fetching.md for patterns.
fetch is cached by default — use cache: 'no-store' for dynamic data. Set revalidate for ISR. See caching.md for strategies.
Use 'use server' functions for form submissions and data mutations. Progressive enhancement — works without JS. See data-fetching.md.
NEXT_PUBLIC_ exposes to client bundle. Server Components access all env vars. Use .env.local for secrets.
Use data-fetching.md.
Protect routes in middleware, not in pages. Middleware runs on Edge — lightweight auth checks only. See auth.md.
| Server Component | Client Component |
|------------------|------------------|
| Default in App Router | Requires 'use client' |
| Can be async | Cannot be async |
| Access backend, env vars | Access hooks, browser APIs |
| Zero JS shipped | JS shipped to browser |
Decision: Start Server. Add 'use client' only for: useState, useEffect, onClick, browser APIs.
| Trap | Fix |
|------|-----|
| router.push in Server | Use redirect() |
| prefetches all | prefetch={false} |
| next/image no size | Add width/height or fill |
| Metadata in Client | Move to Server or generateMetadata |
| useEffect for data | Fetch in Server Component |
| Import Server→Client | Pass as children/props |
| Middleware DB call | Call API route instead |
| Missing await params (v15) | Params are async in Next.js 15 |
params and searchParams are now Promise — must awaitfetch not cached by default — opt-in with cache: 'force-cache'useActionState, useFormStatusInstall with clawhub install if user confirms:
react — React fundamentals and patternstypescript — Type safety for better DXprisma — Database ORM for Next.js appstailwindcss — Styling with utility classesnodejs — Server runtime knowledgeclawhub star nextjsclawhub syncGenerated Mar 1, 2026
Building a scalable online store with dynamic product listings, user authentication, and server-side rendering for SEO. The agent helps implement App Router for efficient routing, server components for data fetching, and caching strategies to handle high traffic.
Creating a headless CMS with real-time content updates, user roles, and media management. The agent assists in using server components for secure data handling, streaming for large datasets, and middleware for authentication to protect admin routes.
Developing a dashboard for analytics and user management with interactive charts and forms. The agent guides on separating server and client components, using server actions for data mutations, and optimizing performance with caching and streaming.
Building a learning platform with video streaming, quizzes, and progress tracking. The agent supports implementing parallel routing for different lesson modules, data fetching for dynamic content, and authentication to secure user data.
Designing a system for scheduling appointments, patient records, and notifications. The agent helps with server components for backend integration, caching for availability data, and deployment patterns to ensure reliability and compliance.
Offering tiered subscription plans with features like analytics, user management, and premium support. The agent enables rapid development of scalable applications with authentication and data handling, reducing time-to-market and maintenance costs.
Generating revenue through transaction fees, seller subscriptions, and advertising. The agent assists in building high-performance storefronts with optimized routing, caching for product data, and secure payment integrations.
Earning from ads, premium content access, and sponsored posts. The agent supports creating fast-loading pages with server-side rendering, streaming for media content, and authentication for user segmentation and access control.
💬 Integration Tip
Start by reading setup.md for project integration and use memory-template.md to establish consistent patterns, ensuring smooth collaboration and scalability.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.