# Send NextJS to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "nextjs", "name": "NextJS", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/ivangdavila/nextjs", "canonicalUrl": "https://clawhub.ai/ivangdavila/nextjs", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/nextjs", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=nextjs", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "auth.md", "caching.md", "data-fetching.md", "deployment.md", "memory-template.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "nextjs", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-06T03:00:47.525Z", "expiresAt": "2026-05-13T03:00:47.525Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=nextjs", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=nextjs", "contentDisposition": "attachment; filename=\"nextjs-1.1.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "nextjs" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/nextjs" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/nextjs", "downloadUrl": "https://openagent3.xyz/downloads/nextjs", "agentUrl": "https://openagent3.xyz/skills/nextjs/agent", "manifestUrl": "https://openagent3.xyz/skills/nextjs/agent.json", "briefUrl": "https://openagent3.xyz/skills/nextjs/agent.md" } } ``` ## Documentation ### 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 TopicFileSetupsetup.mdMemory templatememory-template.mdRouting (parallel, intercepting)routing.mdData fetching & streamingdata-fetching.mdCaching & revalidationcaching.mdAuthenticationauth.mdDeploymentdeployment.md ### 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 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 ComponentClient ComponentDefault in App RouterRequires 'use client'Can be asyncCannot be asyncAccess backend, env varsAccess hooks, browser APIsZero JS shippedJS shipped to browser Decision: Start Server. Add 'use client' only for: useState, useEffect, onClick, browser APIs. ### Common Traps TrapFixrouter.push in ServerUse redirect() prefetches allprefetch={false}next/image no sizeAdd width/height or fillMetadata in ClientMove to Server or generateMetadatauseEffect for dataFetch in Server ComponentImport Server→ClientPass as children/propsMiddleware DB callCall API route insteadMissing await params (v15)Params are async in Next.js 15 ### Next.js 15 Changes params and searchParams are now Promise — must await fetch not cached by default — opt-in with cache: 'force-cache' Use React 19 hooks: useActionState, useFormStatus ### Related Skills Install with clawhub install if user confirms: react — React fundamentals and patterns typescript — Type safety for better DX prisma — Database ORM for Next.js apps tailwindcss — Styling with utility classes nodejs — Server runtime knowledge ### Feedback If useful: clawhub star nextjs Stay updated: clawhub sync ## Trust - Source: tencent - Verification: Indexed source record - Publisher: ivangdavila - Version: 1.1.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-06T03:00:47.525Z - Expires at: 2026-05-13T03:00:47.525Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/nextjs) - [Send to Agent page](https://openagent3.xyz/skills/nextjs/agent) - [JSON manifest](https://openagent3.xyz/skills/nextjs/agent.json) - [Markdown brief](https://openagent3.xyz/skills/nextjs/agent.md) - [Download page](https://openagent3.xyz/downloads/nextjs)