# Nextjs App Router Patterns

> Next.js 14+ App Router 架构、Server Components 和现代全栈 React 开发的综合模式。当用户要求构建 Next.js 应用、使用 App Router、实现 Server Components 或优化数据获取时使用。

- Skill: `kscz0000/nextjs-app-router-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add kscz0000/nextjs-app-router-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/nextjs-app-router-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/nextjs-app-router-patterns

---


# Next.js App Router Patterns

Next.js 14+ App Router 架构、Server Components 和现代全栈 React 开发的综合模式。

## 何时使用此技能

- 使用 App Router 构建新的 Next.js 应用
- 从 Pages Router 迁移到 App Router
- 实现 Server Components 和流式渲染
- 设置并行路由和拦截路由
- 优化数据获取和缓存
- 使用 Server Actions 构建全栈功能

## 何时不使用此技能

- 任务与 Next.js App Router 模式无关
- 需要此范围之外的其他领域或工具

## 使用说明

- 明确目标、约束和所需输入。
- 应用相关最佳实践并验证结果。
- 提供可操作的步骤和验证方法。
- 如需详细示例，请打开 `resources/implementation-playbook.md`。

## 资源

- `resources/implementation-playbook.md` 包含详细模式和示例。

## 局限性
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准，请停下来请求澄清。