Skills nextjs-app-router-patterns
📦

nextjs-app-router-patterns

Content revision r2 High Risk ⚙️ External commands🌐 Network access🔑 Env variables

Build Robust Next.js App Router Applications

App Router projects require clear decisions about rendering, routing, data access, and caching. This skill provides focused Next.js patterns and implementation examples.

Supports: Claude Codex Code(CC)
⚠️ 38 Poor

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
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.

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.

Markdown detail GET /skills/sickn33-nextjs-app-router-patterns.md Signed manifest GET /api/skills/sickn33-nextjs-app-router-patterns/manifest Signed lockfile GET /api/skills/sickn33-nextjs-app-router-patterns/lockfile

Test it

Using "nextjs-app-router-patterns". Design a product page with immediate details and slower reviews.

Expected outcome:

Keep product details in the route Server Component. Stream reviews behind a Suspense boundary with a stable skeleton and independent error handling.

Using "nextjs-app-router-patterns". Choose caching for a product catalog updated every five minutes.

Expected outcome:

  • Use timed revalidation for catalog reads.
  • Tag product fetches for targeted invalidation after mutations.
  • Use no-store only for personalized or immediately consistent data.

Using "nextjs-app-router-patterns". Open a photo in a modal while preserving a direct page URL.

Expected outcome:

Use an intercepting route in a parallel modal slot. Keep the standard photo route for refreshes, sharing, and direct navigation.

Security Audit

High Risk
v5 • 8/4/2026 Open versioned report

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
Files scanned
586
Lines analyzed
0
Review items
0
False positives ignored

Confirmed security concerns (1)

High
resources/implementation-playbook.md:417-424resources/implementation-playbook.md:513-519
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.

Risk Factors

⚙️ External commands (4)
resources/implementation-playbook.md:136-157 resources/implementation-playbook.md:242-244 SKILL.md:32 SKILL.md:36
🌐 Network access (7)
resources/implementation-playbook.md:75 resources/implementation-playbook.md:135 resources/implementation-playbook.md:501 resources/implementation-playbook.md:504 resources/implementation-playbook.md:507 resources/implementation-playbook.md:510 resources/implementation-playbook.md:75
🔑 Env variables (2)
resources/implementation-playbook.md:136 resources/implementation-playbook.md:136
Audited by: codex View Audit History →
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.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/sickn33-nextjs-app-router-patterns/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-nextjs-app-router-patterns/security.svg)](https://skillstore.io/skills/sickn33-nextjs-app-router-patterns?utm_source=security_passport_badge)

HTML badge

<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>

Embed card

<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>
Academic citations (APA · BibTeX · CFF)

APA citation

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/5

BibTeX citation

@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"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
wshobson Recommended

wshobson-nextjs-app-router-patterns

Skillstore Score 77
Evidence Confidence High
Skillstore usage 12
Updated

2026-08-21

sickn33 Current

sickn33-nextjs-app-router-patterns

Skillstore Score 38
Evidence Confidence Medium
Skillstore usage 9
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: Medium
55
Architecture
85
Maintainability
87
Content
69
Community
83
Spec Compliance

What You Can Build

Start an App Router Project

Create a practical route, layout, rendering, and data-fetching structure for a new application.

Migrate from Pages Router

Map existing pages, API routes, and loading behavior to App Router conventions.

Review Full-Stack Architecture

Evaluate component boundaries, cache policy, streaming, Server Actions, and route handlers before implementation.

Try These Prompts

Create a Basic App Route 
Create an App Router page for [feature]. Include the layout, loading state, data source, and Server or Client Component choices.
Choose Component Boundaries 
Review [component tree]. Identify Server and Client Components, explain each boundary, and minimize client-side JavaScript while preserving required interactions.
Design Streaming and Caching 
Design loading and caching for [route]. Separate blocking and streamed data, define Suspense boundaries, and select cache and revalidation policies.
Plan an Advanced App Router Migration 
Create a migration plan for [Pages Router application]. Cover routing, data fetching, APIs, metadata, parallel routes, testing, rollout, and rollback risks.

Best Practices

  • Begin with Server Components and add Client Components only for browser APIs or interaction.
  • Define cache freshness and invalidation requirements for every data source.
  • Validate inputs and enforce authorization before database mutations in route handlers and Server Actions.

Avoid

  • Do not move entire feature trees to the client for one interactive control.
  • Do not apply one cache policy to personalized, static, and frequently changing data.
  • Do not pass unvalidated request bodies or form data directly to database operations.

Frequently Asked Questions

Which Next.js versions does this skill target?
It targets Next.js 14 and later App Router concepts. Confirm version-specific APIs against current Next.js documentation.
Does it support Pages Router projects?
It supports planning migrations from Pages Router. Its implementation patterns primarily target App Router.
Can it decide between Server and Client Components?
Yes. It evaluates data access, interaction, hooks, browser APIs, and serialization boundaries.
Does it cover caching and revalidation?
Yes. It covers no-store, force-cache, timed revalidation, cache tags, and path revalidation.
Does it implement authentication and input validation?
No. Add project-specific authentication, authorization, strict schemas, and field allowlists before using mutation examples.
Can it validate a complete application?
No. Run framework builds, tests, security checks, and deployment validation in the target environment.

Developer Details

Author

sickn33

License

MIT

Skillstore revision

r2

Version notice

The author did not declare a version.

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-app-router-patterns

Ref

81e05e636292629114b76cbb3922fbe57672fc02

Maintenance freshness

8/5/2026

Usage

7 downloads · 154 views

File structure

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md

More from sickn33

View all

Related Skills

View all