Next.js App Router principles. Server Components, data fetching, routing patterns.
npxskills add davila7/claude-code-templates--skill nextjs-best-practicesLoading…
Principles for Next.js App Router development.
Does it need...?
│
├── useState, useEffect, event handlers
│ └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│ └── Server Component (default)
│
└── Both?
└── Split: Server parent + Client child
| Type | Use |
|---|---|
| Server | Data fetching, layout, static content |
| Client | Forms, buttons, interactive UI |
| Pattern | Use |
|---|---|
| Default | Static (cached at build) |
| Revalidate | ISR (time-based refresh) |
| No-store | Dynamic (every request) |
| Source | Pattern |
|---|---|
| Database | Server Component fetch |
| API | fetch with caching |
| User input | Client state + server action |
| File | Purpose |
|---|---|
page.tsx | Route UI |
layout.tsx | Shared layout |
loading.tsx | Loading state |
error.tsx | Error boundary |
not-found.tsx | 404 page |
| Pattern | Use |
|---|---|
Route groups (name) | Organize without URL |
Parallel routes @slot | Multiple same-level pages |
Intercepting (.) | Modal overlays |
| Method | Use |
|---|---|
| GET | Read data |
| POST | Create data |
| PUT/PATCH | Update data |
| DELETE | Remove data |
| Type | Use |
|---|---|
| Static export | Fixed metadata |
| generateMetadata | Dynamic per-route |
| Layer | Control |
|---|---|
| Request | fetch options |
| Data | revalidate/tags |
| Full route | route config |
| Method | Use |
|---|---|
| Time-based | revalidate: 60 |
| On-demand | revalidatePath/Tag |
| No cache | no-store |
| ❌ Don't | ✅ Do |
|---|---|
| 'use client' everywhere | Server by default |
| Fetch in client components | Fetch in server |
| Skip loading states | Use loading.tsx |
| Ignore error boundaries | Use error.tsx |
| Large client bundles | Dynamic imports |
app/
├── (marketing)/ # Route group
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # Dashboard layout
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
Remember: Server Components are the default for a reason. Start there, add client only when needed.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).