📦
content-creator
88创建品牌一致的营销内容
营销团队需要在各个渠道保持一致的内容。此技能可帮助规划、撰写、分析和优化内容，使其符合品牌语调和 SEO 要求。
写作与内容 查看
技能 nextjs-app-router-patterns
📦
nextjs-app-router-patterns
内容修订 r2 高风险 ⚙️ 外部命令🌐 网络访问🔑 环境变量
构建 Next.js App Router 功能
Next.js App Router 工作在服务器端、客户端和路由边界之间可能很难组织。此技能为数据获取、流式传输、Server Actions、route handlers、metadata 和缓存提供实用模式。
支持: Claude Codex Code(CC)
安装前请停下并请求确认。
请审查安装计划，并在更改文件前获得用户明确同意。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "nextjs-app-router-patterns" from https://skillstore.io/skills/sickn33-nextjs-app-router-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-nextjs-app-router-patterns/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“nextjs-app-router-patterns”。 开发者询问如何构建带筛选器的产品列表页面。
预期结果:
- 建议使用读取搜索参数的服务器端渲染页面。
- 将产品数据获取放在靠近产品列表的位置。
- 为慢速列表更新添加 Suspense 边界。
- 使用基于 tag 的缓存失效处理产品变更。
正在使用“nextjs-app-router-patterns”。 团队想要一个同时支持直接链接的照片详情模态框。
预期结果:
- 建议使用 intercepting route 进行模态导航。
- 为直接 URL 和刷新保留完整详情页面。
- 使用共享详情组件以避免重复行为。
正在使用“nextjs-app-router-patterns”。 负责人在发布前审查产品变更工作流。
预期结果:
- 检查 Server Actions 或 route handlers 哪个更适合。
- 指出验证、授权、错误处理和缓存 revalidation。
- 识别用户可见的加载状态和失败状态。
安全审计
高风险v5 • 2026/8/4 打开版本化报告
All 22 static findings are false positives caused by JavaScript template literals, Markdown code references, and ordinary Next.js examples. However, the playbook demonstrates database mutations without explicit schema validation or authorization, creating a high-risk pattern when copied into production.
2
已扫描文件
586
分析行数
0
复核项
0
已忽略误报
已确认安全问题 (1)
高
Unvalidated and Unauthorized Database Mutation Patterns
The examples pass an entire request body or action data into database writes without showing schema validation, field allowlisting, authentication, or resource authorization.
The POST handler directly supplies request.json() as create data, and the exported Server Action writes caller-supplied data without demonstrated controls. These are clear unsafe patterns when adopted.
风险因素
⚙️ 外部命令 (4)
🌐 网络访问 (7)
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/sickn33-nextjs-app-router-patterns/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-nextjs-app-router-patterns?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-nextjs-app-router-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-nextjs-app-router-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-nextjs-app-router-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
sickn33. (2026). nextjs-app-router-patterns security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-nextjs-app-router-patterns/audits/5BibTeX 引用
@techreport{sickn33-sickn33-nextjs-app-router-patterns-2026,
author = {sickn33},
title = {nextjs-app-router-patterns security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-nextjs-app-router-patterns/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "nextjs-app-router-patterns security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-08-04"
url: "https://skillstore.io/skills/sickn33-nextjs-app-router-patterns/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-nextjs-app-router-patterns:audit:5"
description: "Skillstore immutable audit report identifier"
比较变体
2 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 评分最高
Skillstore 评分
评分依据 证据置信度: 中 55
架构
85
可维护性
87
内容
69
社区
83
规范符合性
你能构建什么
规划新的 App Router 项目
在实现之前，为新功能选择布局、页面、加载状态、route handlers 和 metadata。
现代化 Pages Router 功能
将现有页面、API routes 和客户端数据获取映射到 App Router 模式，并提供清晰的迁移步骤。
审查渲染和缓存选择
针对功能计划比较 Server Components、流式传输、revalidation 和基于 tag 的缓存失效。
试试这些提示
映射 App Router 结构
解释我的 Next.js 功能的 App Router 文件结构。包括布局、页面、加载状态、错误状态，以及适用时的 route handlers。
将页面转换为 Server Components
审查这个功能计划，并建议哪些部分应为 Server Components、Client Components 或 Server Actions。解释数据流和边界。
设计流式传输和缓存
设计一个带有 Suspense streaming、加载回退、fetch caching 和 revalidation 的 Next.js App Router 页面。包括每项选择的权衡。
审计 App Router 功能计划
从路由、数据获取、缓存失效、metadata、验证、授权和生产就绪性方面审计我的 App Router 功能设计。
最佳实践
- 从 Server Components 开始，仅在需要浏览器状态或事件时添加 Client Components。
- 围绕慢速数据区域放置 Suspense 边界，使页面能够尽早流式传输有用内容。
- 在将示例用于生产环境之前，添加验证、授权和清晰的错误状态。
避免
- 在没有明确浏览器端需求的情况下，将所有数据获取都移到 Client Components 中。
- 使用 Server Actions 或 route handlers 时不验证输入和用户权限。
- 添加许多嵌套布局，而简单的 route groups 本可以让树结构更易维护。
常见问题
它面向哪些 Next.js 版本？
它面向 Next.js 14 及更新版本的 App Router 概念，包括 Server Components、Server Actions 和 route handlers。
它能帮助从 Pages Router 迁移吗？
可以。它可以帮助将页面、API routes 和数据获取模式映射到 App Router 等价模式。
它会生成完整应用程序吗？
不能。它提供必须适配到真实项目中的模式和实现指导。
它涵盖 Server Actions 吗？
会。它包括用于变更、重定向、缓存 revalidation 和渐进增强的模式。
这些示例达到生产就绪了吗？
它们是起始模式。请添加身份认证、授权、验证、日志记录和项目特定的错误处理。
哪些 AI 工具可以使用它？
Claude、Codex 和 Claude Code 可以通过兼容的技能工作流使用该技能内容。
开发者详情
作者
sickn33许可证
MIT
Skillstore 修订
r2
版本提示
作者未声明版本。
仓库
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-app-router-patterns引用
81e05e636292629114b76cbb3922fbe57672fc02
维护新鲜度
2026/8/6
使用量
7 次下载 · 154 次浏览
文件结构
sickn33 的更多技能
查看全部📦
prompt-engineering-patterns
85用成熟模式改进 LLM 提示词
不一致的提示词会浪费时间，并让 AI 输出难以信任。此技能通过可复用模式、示例、评估步骤和优化工作流来指导提示词设计。
效率 查看
📦
senior-architect
81设计可扩展的软件架构
在 Web、移动端、后端和云系统之间比较架构决策并不容易。此技能为报告、依赖项审查和权衡文档提供结构化指南与本地脚手架脚本。
编码与开发 查看
📦
senior-fullstack
81使用资深级模式构建全栈应用
团队需要针对现代 Web 应用的一致设置、架构和审查指导。此技能为 React、Next.js、Node.js、GraphQL 和 PostgreSQL 项目提供脚手架工具、工作流参考和质量提示。
编码与开发 查看
📦
prompt-engineer
81使用 Prompt Engineer 优化 AI 提示词
当目标模糊或复杂时，编写清晰的提示词很困难。此技能会使用经过验证的提示词框架，将粗略请求转化为结构化提示词。
效率 查看
📦
product-manager-toolkit
80利用研究洞察优先安排产品工作
产品团队需要更快的方法来对功能排序、综合访谈内容并记录决策。此技能提供 RICE 评分、访谈分析和 PRD 模板，用于结构化规划。
效率 查看
相关技能
查看全部📦
nextjs-architecture
81规划 Next.js App Router 架构
由 89jobrien
Next.js 团队在选择路由、组件、数据加载和迁移步骤时可能会遇到困难。此技能为 App Router、Server Components 和性能提供结构化的架构指导。
编码与开发 查看
📦
nextjs-optimization
80优化 Next.js 性能
由 Atman36
Next.js 应用可能会因为大型 bundle、薄弱的缓存和未优化的媒体而变慢。此技能会指导 Claude、Codex 和 Claude Code 对生产应用进行有针对性的性能改进。
编码与开发 查看
📦
vercel-react-view-transitions
82实现 React View Transitions
由 vercel-labs
React 视图过渡很容易放错位置，从而导致无提示或嘈杂的动画。此技能可指导路由、Suspense、列表和共享元素动画的选择。
编码与开发 查看
📦
react-dev
82构建类型安全的 React 组件
由 softaworks
React TypeScript 工作通常需要精确的事件、hook 和路由类型。此技能提供针对类型化组件、React 19 API 和路由的聚焦模式。
编码与开发 查看
📦
senior-frontend
81构建可用于生产的前端功能
由 davila7
前端团队需要在各项目中获得一致的 React 和 Next.js 指导。此技能提供用于前端分析的参考工作流、质量实践和辅助脚本。
编码与开发 查看
📦
vercel-react-best-practices
80优化 React 和 Next.js 性能
由 vercel-labs
React 和 Next.js 应用常常会因为瀑布式请求、大型包体以及可避免的重复渲染而变慢。此技能为代理提供具体规则，以便更安全地进行以性能为重点的改动。
编码与开发 查看