前言¶
Next.js 14 之后，App Router 成为默认路由方式，服务端组件、流式渲染、Server Actions 几件事叠在一起，项目里容易出现几种常见问题：哪些代码该放在服务端、哪些该保持客户端交互，划分依据不统一；页面加载慢时，很难判断是组件树没拆对，还是渲染方式没走流式；多人协作时，路由目录结构和命名习惯各写各的，评审时反复纠结格式而非逻辑。
下面介绍的 Skill 「全栈前端专家」，定位就是把这些约定前置成一套可复用的指令，让模型在写 Next.js 14+ 项目时按统一方式组织 App Router 代码。
这是什么¶
一句话定位：面向 Next.js 14+ 的 App Router 开发 Skill，把服务端组件与流式渲染的使用方式固化进生成流程。
- 名称：全栈前端专家
- 坐标：
@kunlungrowth/nextjs-developer - 版本：1.0.0
- 来源：enterprise
- 分类：dev-programming
- 发布者：昆仑增长
- 需要 API Key：否（标签
requires_api_key=false）
它解决的问题是：在 Next.js 14+ 项目里，用一致的方式生成 App Router 路由、划分服务端组件与客户端组件边界、在合适的层级启用流式渲染，减少反复返工。
核心能力¶
根据官方简介，这个 Skill 覆盖三件事：
- App Router：按 Next.js 14+ 的 App Router 约定组织路由与目录结构。
- 服务端组件：在合适的层级使用服务端组件，区分可交互的客户端组件。
- 流式渲染：在页面层启用流式渲染，把耗时部分与首屏内容分开。
三件事都指向同一个目标：让生成出来的代码在渲染链路上分层清晰，而不是把取数、渲染、交互混在同一个组件里。
安装与启用¶
官方入口有两个：
SkillHub 页面：https://www.skillhub.cn/skills/kunlungrowth/nextjs-developer
接口地址：https://api.skillhub.cn/kunlungrowth/nextjs-developer
坐标与版本：
@kunlungrowth/nextjs-developer
version: 1.0.0
source: enterprise
category: dev-programming
说明两点：
- 本次抓取到的资料里没有给出具体安装命令，也没有 Cursor、Codex CLI、Claude Code 各自的接入差异，所以这里不写命令，避免给出无法核实的步骤。
- 该 Skill 不需要 API Key，接入时不需要额外准备密钥。具体安装方式以 SkillHub 页面当前展示为准。
典型用法¶
抓取到的资料里没有提供官方的可复现代码示例，下面这段是基于官方简介中「App Router、服务端组件、流式渲染」三项能力整理出的工作顺序，属于能力推导，不是官方示例。
在已有 Next.js 14+ 项目中使用时，可以按这个顺序推进：
- 先确定路由结构：按 App Router 约定梳理
app目录下的页面与布局层级。 - 再划分组件边界：明确哪些部分由服务端组件完成取数与渲染，哪些部分需要客户端交互。
- 然后处理渲染方式：对首屏不需要立即拿到完整数据的部分，安排流式渲染的位置。
- 最后核对：检查生成结果是否把取数逻辑放在了服务端组件，客户端组件是否只保留了交互职责。
如果项目还在用 Pages Router，需要先确认迁移到 App Router 的范围，再按上述顺序落地。
适用场景与注意事项¶
适合：
- 新建的 Next.js 14+ 项目，想从一开始就按 App Router 的分层方式组织代码。
- 已有 App Router 项目，代码在服务端组件与客户端组件的划分上不统一，需要统一生成规范。
- 页面存在明显加载等待，希望用流式渲染改善首屏体验的场景。
注意：
- 该 Skill 面向 Next.js 14+ 的 App Router，Pages Router 项目不在其能力范围内。
- 来源为 enterprise，分类是 dev-programming，发布者是昆仑增长，接入前建议先看一遍官方页面当前的说明。
- 抓取到的资料显示评分 100000、下载 803、安装 0。安装量仍为 0，说明使用人数还很少，建议先在一个小模块上试一轮再推广到整个仓库。
- 资料里没有提到与特定 IDE 的绑定关系，接入方式取决于你使用的客户端，以官方页面为准。
小结¶
「全栈前端专家」的价值在于把 Next.js 14+ 里最容易散乱的三件事——App Router 结构、服务端组件边界、流式渲染位置——收敛成一套可复用的生成约定。如果你正在用 App Router 写项目，或者准备从 Pages Router 迁过来，可以先把官方页面过一遍，再决定是否接入。
官方地址：https://www.skillhub.cn/skills/kunlungrowth/nextjs-developer
