High Risk:This skill has significant security concerns. Review the findings below before installing.

nextjs

Caution·Scanned 2/19/2026

Dangerous skill: contains an example API that returns process.env.API_URL, exposing environment variables and enabling secret leakage. It documents shell commands (PORT=3001 node .next/standalone/server.js &), network calls (https://api.example.com/posts, https://res.cloudinary.com/...), and installation steps copying into ~/.claude/skills.

from clawhub.ai·v85e5aa4·79.3 KB·0 installs
Scanned from 1.0.0 at 85e5aa4 · Transparency log ↗
$ vett add clawhub.ai/wpank/nextjsReview security findings before installing

Next.js App Router

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+.

What's Inside

  • Rendering modes: Server Components, Client Components, Static, Dynamic, Streaming
  • File conventions and route organization
  • Data fetching patterns and waterfall avoidance
  • Server Actions for mutations
  • Caching strategy (no-cache, static, ISR, tag-based)
  • RSC boundary rules and serialization
  • Async APIs (Next.js 15+)
  • Parallel routes, intercepting routes, and modal patterns
  • Metadata and SEO optimization
  • Error handling and redirect gotchas
  • Streaming with Suspense
  • Performance: next/image, next/link, next/font, next/script
  • Hydration error causes and fixes
  • Self-hosting with Docker and PM2

When to Use

  • Building 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
  • Debugging hydration errors or RSC boundary issues

Installation

npx add https://github.com/wpank/ai/tree/main/skills/frontend/nextjs

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install nextjs

Manual Installation

Cursor (per-project)

From your project root:

mkdir -p .cursor/skills
cp -r ~/.ai-skills/skills/frontend/nextjs .cursor/skills/nextjs

Cursor (global)

mkdir -p ~/.cursor/skills
cp -r ~/.ai-skills/skills/frontend/nextjs ~/.cursor/skills/nextjs

Claude Code (per-project)

From your project root:

mkdir -p .claude/skills
cp -r ~/.ai-skills/skills/frontend/nextjs .claude/skills/nextjs

Claude Code (global)

mkdir -p ~/.claude/skills
cp -r ~/.ai-skills/skills/frontend/nextjs ~/.claude/skills/nextjs

Related Skills

  • react-best-practices — React/Next.js performance optimization rules
  • react-performance — Performance patterns prioritized by impact

Part of the Frontend skill category.