Skills nextjs-app-router-patterns

📦

nextjs-app-router-patterns

Name: nextjs-app-router-patterns
Author: sickn33

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

Stop for confirmation before installing.

Review the plan and obtain explicit user consent before changing files.

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.

Files scanned

586

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (1)

High

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

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

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

wshobson Recommended

wshobson-nextjs-app-router-patterns

Skillstore Score 77

Evidence Confidence High

Skillstore usage 13

Updated

2026-09-09

sickn33 Current

sickn33-nextjs-app-router-patterns

Skillstore Score 38

Evidence Confidence Medium

Skillstore usage 9

Updated

2026-09-09

Skillstore Score

Why this score Evidence Confidence: Medium

Architecture

Maintainability

Content

Community

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

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