nextjs-app-router-patterns
建置更好的 Next.js App Router 應用程式
當路由、串流、快取和 Server Components 互相作用時，Next.js App Router 專案可能很難規劃結構。這項技能為 Claude、Codex 和 Claude Code 提供現代 Next.js 應用程式架構的實用模式。
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "nextjs-app-router-patterns" from https://skillstore.io/skills/wshobson-nextjs-app-router-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-nextjs-app-router-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "nextjs-app-router-patterns". 產品列表頁需要篩選、分頁和快速首次繪製。
Expected outcome:
- 建議：將頁面保留為 Server Component，並在接近列表的位置擷取篩選後的產品。
- 在產品列表周圍使用 Suspense，讓篩選器和周邊 layout 能先完成渲染。
- 對產品資料使用 tag-based revalidation，並在存取資料庫前驗證 query parameters。
Using "nextjs-app-router-patterns". 儀表板需要獨立的 analytics 和 team panels。
Expected outcome:
- 建議：對可獨立載入的 panels 使用 parallel routes。
- 為每個 panel 提供自己的載入狀態，讓較慢的 analytics 不會阻塞 team data。
- 將共享導覽和 layout state 保留在父層 dashboard layout 中。
Using "nextjs-app-router-patterns". API route 接收產品建立請求。
Expected outcome:
- 建議：解析 request，使用 schema 驗證、授權呼叫者，並對欄位使用 allowlist。
- 針對驗證錯誤和缺少的記錄回傳清楚的狀態碼。
- 避免將原始 request body 直接傳入 persistence calls。
Security Audit
SafeAll static findings were false positives caused by Markdown code fences, TypeScript examples, documentation links, and placeholder data-fetching snippets. No evidence found of command execution, credential exfiltration, prompt injection, environment file access, or system reconnaissance in SKILL.md.
Risk Factors
⚙️ External commands (23)
🌐 Network access (10)
🔑 Env variables (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/wshobson-nextjs-app-router-patterns?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/wshobson-nextjs-app-router-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-nextjs-app-router-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/wshobson-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>Academic citations (APA · BibTeX · CFF)
APA citation
wshobson. (2026). nextjs-app-router-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7BibTeX citation
@techreport{wshobson-wshobson-nextjs-app-router-patterns-2026,
author = {wshobson},
title = {nextjs-app-router-patterns security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7},
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 7)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7"
identifiers:
- type: other
value: "skillstore:wshobson-nextjs-app-router-patterns:audit:7"
description: "Skillstore immutable audit report identifier"
Compare variants
2 installable variantsEach author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
wshobson-nextjs-app-router-patterns
2026-09-09
sickn33-nextjs-app-router-patterns
2026-09-09
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
規劃新的 App Router 專案
在開始實作前，選擇檔案慣例、rendering modes、載入狀態和 route boundaries。
現代化既有 Next.js Routes
將 Pages Router 習慣轉換為使用 Server Components、layouts 和 route handlers 的 App Router 模式。
審查架構模式
檢查功能是否以可維護的方式使用 caching、Suspense、metadata 和 Server Actions。
Try These Prompts
使用 Next.js App Router patterns skill，為此頁面建議 rendering modes。包含 Server Component、Client Component、static、dynamic 和 streaming 的取捨。
使用此技能為這項功能設計 App Router 資料夾結構。在適當情況下包含 layout、page、loading、error、route handler 和 default 檔案。
使用此技能審查這個 data fetching 流程。針對 Next.js App Router 實作建議 caching、revalidation、tag invalidation 和 Suspense boundaries。
使用此技能評估這個包含 parallel routes、intercepting routes、Server Actions 和 metadata generation 的 App Router 設計。指出安全性和驗證缺口。
Best Practices
- 從 Server Components 開始，只有在需要 browser APIs、hooks 或直接互動時才加入 Client Components。
- 在緩慢資料區域周圍放置 Suspense boundaries，讓頁面其餘部分能快速串流。
- 在將 request bodies、form data、route params 和 search params 用於資料庫操作前先進行驗證。
Avoid
- 在沒有明確互動需求的情況下，於大型 route trees 頂端放置 use client。
- 將原始 request bodies 直接傳入 database writes 或 Server Actions。
- 對可安全快取、預先建置或重新驗證的內容使用 dynamic rendering。