nextjs-app-router-patterns
Build Next.js App Router Systems
Next.js App Router projects need clear patterns for data, routing, and rendering. This skill gives reusable guidance for Server Components, streaming, Server Actions, and caching.
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". Plan a product detail page with reviews and recommendations.
Expected outcome:
- A route structure using a dynamic product segment.
- A Server Component plan for the primary product data.
- Suspense boundaries for reviews and recommendations.
- Caching notes for product data and related lists.
Using "nextjs-app-router-patterns". Explain how to refresh product data after an edit.
Expected outcome:
- A Server Action workflow for the update operation.
- A tag invalidation strategy for product lists.
- A path revalidation note for detail pages.
- A redirect or response recommendation after success.
Using "nextjs-app-router-patterns". Compare modal navigation options in App Router.
Expected outcome:
- A recommendation for intercepting routes when preserving page context matters.
- A full-page route fallback for direct visits.
- A layout plan that renders the modal slot beside normal content.
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-08-21
sickn33-nextjs-app-router-patterns
2026-08-21
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Plan a New App Router Build
Use the patterns to choose layouts, loading states, Server Components, and route handlers before implementation.
Implement Full-Stack Features
Apply Server Actions, cache invalidation, route handlers, and redirects for common product workflows.
Migrate from Pages Router
Map older routing concepts to App Router files, nested layouts, streaming, and metadata APIs.
Try These Prompts
Use this skill to outline the App Router files for a product listing page with loading and not-found states.
Use this skill to recommend Server Component data fetching and caching choices for a catalog page with filters.
Use this skill to design a Server Action flow for updating a product and refreshing the affected pages.
Use this skill to propose parallel routes, an intercepting modal route, and Suspense boundaries for a dashboard.
Best Practices
- Start with Server Components and add Client Components only for browser interactivity.
- Place Suspense boundaries around slow or independent data regions.
- Pair mutation flows with clear cache revalidation and redirect behavior.
Avoid
- Using Client Components for data that can be fetched on the server.
- Adding deeply nested layouts without a clear user experience need.
- Shipping route handlers or Server Actions without validation and authorization review.