Next.js 路由与渲染设计

原名：nextjs-app-router-patterns

明确服务端组件、客户端组件、数据获取和缓存边界，按项目版本设计页面。

中文 Skills 技能说明

使用 Next.js 的创业产品要做内容页或后台时，可让前端开发工程师使用。提供路由结构、依赖版本、数据接口和权限规则，技能安排 App Router、加载与错误状态、流式渲染及缓存，交付页面结构与验证清单。上游示例针对 14+，不能保证所有版本通用；密钥不能进入客户端，缓存不能混入他人数据。代码、构建和浏览器测试由授权桌面端完成，部署和接口改动需人审；不会改写 CEOFans 既有 Vue 页面。

上游能力依据

上游原始适用说明：Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

上游 SKILL.md 主要章节（保留原文标题）：

When to Use This Skill
Core Concepts
1. Rendering Modes
2. File Conventions
Quick Start
Detailed patterns and worked examples
Best Practices
Do's
Don'ts

使用边界

先核对上游说明、依赖、输入资料和所需权限。涉及写入、删除、发布、支付或外部发送时，必须在执行前人工确认。

作者、翻译与许可证

原作者: Seth Hobson（wshobson）与 agents contributors
中文翻译: CEOFans翻译
许可证: MIT
上游来源: https://github.com/wshobson/agents/tree/46891e7e60da0e52baf1050b7b6391b64e84c6d9/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns

适用范围

平台：linux、macos、windows；标签：设计与前端、Next.js 路由与渲染设计、开源技能

安全提示

基础静态扫描不等于绝对安全。技能可能调用命令、浏览器、云服务或本地文件，请在最小权限环境中使用，高风险操作必须人工确认。

如发现侵权、许可证或安全问题，可在本页前台提交投诉，管理员复核后可立即下架。