المهارات nextjs-app-router-patterns
📦

nextjs-app-router-patterns

آمن

使用 App Router 模式构建现代化 Next.js 应用

متاح أيضًا من: wshobson

正在为 Next.js 14+ App Router 的复杂性而苦恼？本技能提供经过验证的模式，涵盖服务器组件、流式传输、并行路由和数据获取，助您加速开发。

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-app-router-patterns". 创建一个带有 ISR 缓存的服务器组件来获取博客文章

النتيجة المتوقعة:

  • 生成 app/blog/page.tsx，包含异步数据获取
  • 配置 revalidate: 3600 以实现每小时缓存刷新
  • 添加 loading.tsx 骨架屏以在重新验证期间提供更好的用户体验
  • 包含错误边界以实现优雅的错误处理

استخدام "nextjs-app-router-patterns". 实现一个拦截照片路由的模态框

النتيجة المتوقعة:

  • 创建 @modal 并行路由结构
  • 在 (.)photos/[id]/page.tsx 添加拦截路由
  • 为直接导航设置 default.tsx 回退
  • 实现具有正确关闭行为的模态组件

التدقيق الأمني

آمن
v1 • 2/24/2026

This skill contains documentation-only markdown files with Next.js educational code examples. All 56 static findings are false positives because the scanner incorrectly flagged markdown code blocks as executable code. No actual security risks detected.

2
الملفات التي تم فحصها
580
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

从 Pages Router 迁移到 App Router

逐步指导将现有 Next.js 应用程序过渡到新的 App Router 架构，最大程度减少中断。

构建性能优化的电子商务网站

实现流式产品页面、并行购物车更新和 ISR 缓存，打造快速、可扩展的在线商店。

创建带有实时数据的仪表板应用

使用并行路由和 Suspense 边界设计具有独立加载面板的复杂布局。

جرّب هذه الموجهات

基础服务器组件设置 
创建一个 Next.js 服务器组件，从 API 获取产品并在网格中显示。包含适当的错误处理和加载状态。
使用 Suspense 实现流式传输 
创建用于表单处理的服务器 Actions 
 
使用服务器 Actions 实现一个结账表单，包含验证、错误处理和成功后的重定向。包括乐观 UI 更新。
为仪表板设置并行路由 
 
设计一个仪表板布局，包含独立加载的分析、团队和活动面板。
 
 
أفضل الممارسات
 
  •  默认使用服务器组件，仅在需要浏览器 API 或交互性时添加 'use client'
  •  将数据获取放在靠近数据消耗的位置，以实现最佳缓存和代码组织
  •  策略性地使用 Suspense 边界以启用流式传输并提升感知性能
 
 
تجنب
 
  •  在服务器组件中使用 useState 或 useEffect，而它们无法在那里执行
  •  在顶层获取所有数据，而不是将获取操作与使用组件放在一起
  •  忽略加载状态，导致数据获取期间用户体验不佳
 
 
الأسئلة المتكررة
 
服务器组件和客户端组件有什么区别？  
服务器组件在服务器端渲染并向浏览器发送 HTML。它们可以直接访问后端资源。客户端组件在浏览器中运行，支持使用 useState、useEffect 和事件处理程序的交互性。
如何从 Pages Router 迁移到 App Router？  
在 pages/ 目录旁边创建 app/ 目录。通过在 app/ 中重新创建路由来逐步迁移。两个路由可以在迁移期间共存。更新导入并适配新的文件约定。
何时应该使用服务器 Actions 而不是 API 路由？  
对于从组件触发的表单提交和变更操作，使用服务器 Actions。当你需要为外部消费者或非 React 客户端提供 REST 端点时，使用 API 路由。
App Router 中的缓存是如何工作的？  
App Router 默认缓存 fetch 请求。使用 cache: 'no-store' 禁用缓存，cache: 'force-cache' 用于静态缓存，或 next: { revalidate: N } 用于 ISR。基于标签的失效机制允许有针对性的缓存更新。
可以在动态段中使用并行路由吗？  
是的，并行路由可以与动态段一起使用。每个并行槽位接收相同的 params。在布局中使用槽位命名约定（如 @analytics 和 @team）来定义独立的渲染区域。
拦截路由的用途是什么？  
拦截路由允许您根据导航上下文为相同的 URL 显示不同的 UI。常见用例包括：从应用内部导航时显示模态框，但在直接访问时显示完整页面。
 
 
تفاصيل المطور
 
المؤلف
 sickn33
 
الترخيص
 
MIT
 
المستودع
 https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-app-router-patterns
 
مرجع
 
main
 
بنية الملفات
 
📁 resources/
 
📄 implementation-playbook.md
 
📄 SKILL.md