nextjs-16-architecture
1
总安装量
1
周安装量
#48612
全站排名
安装命令
npx skills add https://github.com/horuz-ai/claude-plugins --skill nextjs-16-architecture
Agent 安装分布
openclaw
1
opencode
1
claude-code
1
Skill 文档
Next.js 16 Architecture
Architecture patterns for Next.js 16 with Cache Components and feature-based organization.
Core Philosophy
- Dynamic by default, cache what you choose – Use
"use cache"explicitly - Fetch in smallest possible component – Don’t prop-drill data
- Keep everything static, stream only dynamic – Use Suspense for dynamic parts
- Suspense boundaries high – Place in pages/layouts, not feature components
Quick Reference
Feature Folder Structure
features/{feature}/
âââ components/
â âââ server/ # Async data-fetching components
â âââ client/ # 'use client' interactive components
â âââ skeletons/ # Loading states for Suspense
âââ data/ # Database queries (SELECT, INSERT, UPDATE, DELETE)
âââ actions/ # Server Actions ('use server' + cache invalidation)
âââ types/ # TypeScript types (1 file = 1 type)
âââ schemas/ # Zod schemas (1 file = 1 schema)
âââ hooks/ # Client-side hooks
âââ lib/ # Feature-specific utilities
File Naming
| Type | Pattern | Example |
|---|---|---|
| Server component | kebab-case.tsx |
agent-header.tsx |
| Client component | kebab-case.tsx |
login-form.tsx |
| Skeleton | {name}-skeleton.tsx |
agent-header-skeleton.tsx |
| GET query | get-{entity}.ts |
get-agent.ts |
| GET multiple | get-{entities}.ts |
get-agents.ts |
| CREATE | create-{entity}.ts |
create-agent.ts |
| DELETE | delete-{entity}.ts |
delete-agent.ts |
| Server Action | {verb}-{entity}-action.ts |
delete-agent-action.ts |
Cache Pattern
// Data file (SELECT with cache)
export async function getEntity(id: number) {
"use cache";
cacheTag(`entity-${id}`);
cacheLife("hours");
return await db.select()...
}
// Server Action (mutation + invalidation)
"use server";
export async function deleteEntityAction(id: number) {
await deleteEntity(id);
updateTag(`entity-${id}`);
}
Import Rules
- Always absolute:
@/features/... - Never relative:
../../../ - Direction:
app/âfeatures/âshared/
References
Load these based on what you need:
- Feature Structure – Complete feature organization, anatomy, rules
- Components – Server, Client, Skeletons, Compound UI patterns
- Data Layer – Cacheable queries, mutations, session handling
- Server Actions – Actions, cache invalidation, auth patterns
- Pages & Layouts – App router structure, route groups
- Internationalization – next-intl setup, flat keys, translations
- Shared Feature – Cross-cutting concerns, UI components
- Checklists – Code review and new feature checklists