/install nextjs
Setup
On first use, read setup.md for project integration.
When to Use
User needs Next.js expertise — routing, data fetching, caching, authentication, or deployment. Agent handles App Router patterns, server/client boundaries, and production optimization.
Architecture
Project patterns stored in ~/nextjs/. See memory-template.md for setup.
~/nextjs/
├── memory.md # Project conventions, patterns
└── projects/ # Per-project learnings
Quick Reference
| 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 |
Core Rules
1. Server Components by Default
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.
2. Fetch Data on Server
Fetch in Server Components, not useEffect. Use Promise.all for parallel requests. See data-fetching.md for patterns.
3. Cache Intentionally
fetch is cached by default — use cache: 'no-store' for dynamic data. Set revalidate for ISR. See caching.md for strategies.
4. Server Actions for Mutations
Use 'use server' functions for form submissions and data mutations. Progressive enhancement — works without JS. See data-fetching.md.
5. Environment Security
NEXT_PUBLIC_ exposes to client bundle. Server Components access all env vars. Use .env.local for secrets.
6. Streaming for Large Data
Use \x3CSuspense> boundaries to stream content progressively. Wrap slow components individually. See data-fetching.md.
7. Auth at Middleware Level
Protect routes in middleware, not in pages. Middleware runs on Edge — lightweight auth checks only. See auth.md.
Server vs Client
| 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.
Common Traps
| Trap | Fix |
|---|---|
router.push in Server |
Use redirect() |
\x3CLink> 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 |
Next.js 15 Changes
paramsandsearchParamsare nowPromise— must awaitfetchnot cached by default — opt-in withcache: 'force-cache'- Use React 19 hooks:
useActionState,useFormStatus
Related Skills
Install with clawhub install \x3Cslug> 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 knowledge
Feedback
- If useful:
clawhub star nextjs - Stay updated:
clawhub sync
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install nextjs - 安装完成后，直接呼叫该 Skill 的名称或使用
/nextjs触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
NextJS 是什么？
Build Next.js 15 apps with App Router, server components, caching, auth, and production patterns. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 3179 次。
如何安装 NextJS？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install nextjs」即可一键安装，无需额外配置。
NextJS 是免费的吗？
是的，NextJS 完全免费（开源免费），可自由下载、安装和使用。
NextJS 支持哪些平台？
NextJS 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（linux, darwin, win32）。
谁开发了 NextJS？
由 Iván（@ivangdavila）开发并维护，当前版本 v1.1.0。