Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· Developer Tools
NextJS
Build Next.js 15 apps with App Router, server components, caching, auth, and production patterns.
skill openclawclawhub Free
Build Next.js 15 apps with App Router, server components, caching, auth, and production patterns.
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, auth.md, caching.md, data-fetching.md, deployment.md, memory-template.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.1.0
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
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 <Suspense> 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()<Link> 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 <slug> 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
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- SKILL.md
- auth.md
- caching.md
- data-fetching.md
- deployment.md
- memory-template.md