技能 Next.js Patterns

📦

Next.js Patterns

Name: Next.js Patterns
Author: AbdulSamad94

内容修订 r2 安全 ⚙️ 外部命令🌐 网络访问

构建 Next.js App Router 功能

Next.js 团队经常混用页面、布局、路由和数据获取模式。此技能为 Claude、Codex 和 Claude Code 提供简明的项目约定。

支持: Claude Codex Code(CC)

📊 76 合格

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "Next.js Patterns" from https://skillstore.io/skills/abdulsamad94-next-js-patterns.md and its manifest at https://skillstore.io/api/skills/abdulsamad94-next-js-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/abdulsamad94-next-js-patterns.md 已签名 manifest GET /api/skills/abdulsamad94-next-js-patterns/manifest 已签名 lockfile GET /api/skills/abdulsamad94-next-js-patterns/lockfile

测试它

正在使用“Next.js Patterns”。审查一个使用浏览器状态和导航的仪表盘页面。

预期结果:

助手识别出该页面需要 Client Component 边界，并建议仅在该边界内使用程序化导航。

正在使用“Next.js Patterns”。为营销路由规划 metadata 和字体用法。

预期结果:

助手建议在路由文件或布局中放置 metadata，并从根布局使用 next/font/google。

正在使用“Next.js Patterns”。检查产品详情页的数据获取选择。

预期结果:

助手建议对初始数据使用服务器端获取，仅对浏览器驱动的更新使用客户端获取。

安全审计

安全

v10 • 2026/7/18 打开版本化报告

All 13 external-command detections are false positives caused by Markdown inline code and fenced TypeScript examples. The single network detection is documentation that recommends ordinary application data fetching and contains no endpoint, credential, or exfiltration instruction. No prompt injection, deceptive instruction, or other intent-level security concern was found.

已扫描文件

分析行数

复核项

已忽略误报

风险因素

⚙️ 外部命令 (13)

SKILL.md:9 SKILL.md:12 SKILL.md:14 SKILL.md:17 SKILL.md:21 SKILL.md:22 SKILL.md:24-34 SKILL.md:34-37 SKILL.md:37-38 SKILL.md:38 SKILL.md:41 SKILL.md:42-45 SKILL.md:45

🌐 网络访问 (1)

SKILL.md:37

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: claude 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/abdulsamad94-next-js-patterns/security.svg)](https://skillstore.io/skills/abdulsamad94-next-js-patterns?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/abdulsamad94-next-js-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/abdulsamad94-next-js-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/abdulsamad94-next-js-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 引用

AbdulSamad94. (2026). Next.js Patterns security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10

BibTeX 引用

@techreport{abdulsamad94-abdulsamad94-next-js-patterns-2026,
  author = {AbdulSamad94},
  title = {Next.js Patterns security audit report (audit version 10)},
  institution = {Skillstore},
  year = {2026},
  number = {10},
  url = {https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10},
  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: "Next.js Patterns security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
  - name: "AbdulSamad94"
date-released: "2026-07-18"
url: "https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10"
identifiers:
  - type: other
    value: "skillstore:abdulsamad94-next-js-patterns:audit:10"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

架构

可维护性

内容

社区

规范符合性

你能构建什么

创建 App Router 页面

构建符合预期 Next.js 文件结构的页面和布局。

审查路由选择

检查导航是否在正确的组件上下文中使用 Link 或 useRouter。

标准化项目模式

统一团队在组件、数据获取、字体和 metadata 方面的指导。

试试这些提示

规划页面

Use the next-js-patterns skill to plan a new App Router page for this feature. Include page location, component type, and navigation needs.

检查组件边界

Use the next-js-patterns skill to review this component. Tell me whether it should be a Server Component or Client Component and why.

改进导航流程

Use the next-js-patterns skill to review this navigation flow. Recommend Link or useRouter for each navigation action.

审计 App Router 约定

Use the next-js-patterns skill to audit this Next.js feature. Check routing, layouts, component boundaries, data fetching, fonts, and metadata.

最佳实践

默认使用 Server Components，除非需要浏览器 API 或状态。
对内部链接使用 Link，对客户端程序化导航使用 useRouter。
将共享包装器、字体和 metadata 放在合适的布局文件中。

避免

在没有浏览器需求的情况下为每个组件添加 use client。
在 Server Components 中使用 useRouter。
将路由 metadata 放在无关组件中，而不是页面或布局文件中。

常见问题

这个技能支持 App Router 吗？

是。它专注于 Next.js 15 App Router 页面、布局、路由及相关约定。

它会自行生成完整功能吗？

不。它提供 AI 助手在项目中工作时可应用的实现指导。

组件什么时候应该使用 use client？

当组件需要状态、effects、浏览器 API 或仅客户端导航行为时使用它。

它推荐哪些导航 API？

它推荐使用 Link 进行内部导航，并在 Client Components 中使用 useRouter 进行程序化导航。

它涵盖 SEO metadata 吗？

是。它会提醒助手在适当的页面或布局文件中定义 metadata。

Claude Code 和 Codex 可以使用它吗？

是。marketplace metadata 列出了对 Claude、Codex 和 Claude Code 的支持。

开发者详情

作者

AbdulSamad94

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/nextjs

引用

80999bf530a7874d7bedf8ce202001ecb4c4f5e0

维护新鲜度

2026/7/19

使用量

11 次下载 · 250 次浏览

文件结构

📄 SKILL.md