⚡

Next.jsAppRouter最佳实践Skill nextjs-app-router-patterns

这个技能用于掌握Next.js 14+ App Router的高级开发模式，包括Server Components、流式渲染、并行路由和高效数据获取，适用于构建高性能、可扩展的Next.js应用程序，优化服务器端渲染和静态生成，提升全栈开发效率和用户体验。关键词：Next.js, App Router, Server Components, streaming, SSR, SSG, React, 前端开发, 数据获取, 缓存优化。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

name: nextjs-app-router-patterns description: 掌握Next.js 14+ App Router与Server Components、streaming、parallel routes和高级数据获取。用于构建Next.js应用程序、实现SSR/SSG或优化React Server Components。 license: MIT metadata: version: “1.0.0” domain: 前端 triggers: Next.js, App Router, Server Components, streaming, parallel routes, SSR, SSG role: 专家 scope: 实现 output-format: 代码 related-skills: nextjs-best-practices, nextjs-developer, react-expert

Next.js App Router 模式

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

使用此技能的时机

  • 使用App Router构建新的Next.js应用程序
  • 从Pages Router迁移到App Router
  • 实现Server Components和streaming
  • 设置parallel和intercepting routes
  • 优化数据获取和缓存
  • 使用Server Actions构建全栈功能

不要使用此技能的时机

  • 任务与next.js app router模式无关
  • 您需要此范围之外的不同领域或工具

说明

  • 澄清目标、约束和所需输入。
  • 应用相关最佳实践并验证结果。
  • 提供可行的步骤和验证。
  • 如果需要详细示例，请打开resources/implementation-playbook.md。

资源

  • resources/implementation-playbook.md获取详细模式和示例。