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

<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 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()`
`<Link>` 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

```
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
```

NextJS

AI Skill Market Insights

Be Part of the 0+ Developer Community

Setup

When to Use

Architecture

Quick Reference

Core Rules

1. Server Components by Default

2. Fetch Data on Server

3. Cache Intentionally

4. Server Actions for Mutations

5. Environment Security

6. Streaming for Large Data

7. Auth at Middleware Level

Server vs Client

Common Traps

Next.js 15 Changes

Related Skills

Feedback

Quick Start

Manual Installation

TEAR & SHARE

Tags

using-git-worktrees

finishing-a-development-branch

test-driven-development

requesting-code-review

receiving-code-review

Channels

Learn

Compare

Company