AgentSkillsCN

nextjs-16-architecture

采用Cache Components、基于功能的架构及最佳实践，进行全面的Next.js v16开发。适用于任何Next.js 16任务，需掌握：(1) 带有features文件夹模式的项目结构；(2) 使用use cache获取数据的位置；(3) Server组件与Client组件的决策；(4) 每个查询/类型/模式/钩子对应一个文件的模式；(5) 使用updateTag/revalidateTag进行缓存失效；(6) 在features内合理组织组件。适用于所有Next.js 16开发任务。

SKILL.md
--- frontmatter
name: nextjs-16-architecture
description: >
  Comprehensive Next.js v16 development with Cache Components, feature-based architecture, and best practices.
  Use for ANY Next.js 16 task to know - (1) Project structure with features folder pattern, 
  (2) Where to fetch data with use cache, (3) Server vs Client component decisions, 
  (4) One file per query/type/schema/hook pattern, (5) Cache invalidation with updateTag/revalidateTag, 
  (6) Proper component organization within features. Apply to all Next.js 16 development tasks.

Next.js 16 Architecture

Architecture patterns for Next.js 16 with Cache Components and feature-based organization.

Core Philosophy

  1. •Dynamic by default, cache what you choose - Use "use cache" explicitly
  2. •Fetch in smallest possible component - Don't prop-drill data
  3. •Keep everything static, stream only dynamic - Use Suspense for dynamic parts
  4. •Suspense boundaries high - Place in pages/layouts, not feature components

Quick Reference

Feature Folder Structure

code
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

TypePatternExample
Server componentkebab-case.tsxagent-header.tsx
Client componentkebab-case.tsxlogin-form.tsx
Skeleton{name}-skeleton.tsxagent-header-skeleton.tsx
GET queryget-{entity}.tsget-agent.ts
GET multipleget-{entities}.tsget-agents.ts
CREATEcreate-{entity}.tscreate-agent.ts
DELETEdelete-{entity}.tsdelete-agent.ts
Server Action{verb}-{entity}-action.tsdelete-agent-action.ts

Cache Pattern

typescript
// 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: