SuperAPI AI 工具集

nextjs-app-router-patterns

前端与建站

查看项目

更新于 10-16 01:56

技能介绍

用途

本技能面向 Next.js 14+ 的 App Router 架构,提供全面的模式指导,涵盖 Server Components 与现代全栈 React 开发方式。它适用于使用 App Router 构建 Next.js 应用、从 Pages Router 迁移到 App Router、实现 Server Components 与流式渲染、设置并行与拦截路由、优化数据获取与缓存,以及使用 Server Actions 构建全栈功能等任务。

主要能力

技能内容围绕以下主题展开:App Router 架构、Server Components、流式渲染(streaming)、并行路由(parallel routes)、拦截路由(intercepting routes)、高级数据获取与缓存优化,以及通过 Server Actions 构建全栈特性。

使用方式

技能指令要求:先明确目标、约束和所需输入;然后应用相关最佳实践并验证结果;提供可执行的步骤和验证方法。如果任务需要更详细的示例,可以打开 resources/implementation-playbook.md 获取详细模式与示例。

适用场景

适用于新建 Next.js 应用、从 Pages Router 迁移、实现 Server Components 与流式渲染、配置并行与拦截路由、优化数据获取与缓存,以及用 Server Actions 构建全栈功能。

限制

技能明确说明,当任务与 Next.js App Router 模式无关,或需要此范围之外的其它领域或工具时,不应使用本技能。