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

## Install

```bash
npx skillstore add sickn33/nextjs-app-router-patterns
```

## Metadata

- Status: approved
- Slug: sickn33-nextjs-app-router-patterns
- Skillstore revision: r2
- Version status: missing
- Tree hash: 8d73a7ceaf6ff5400edc430a46f61e682b24395577180527c7db6881634ecdcd
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-app-router-patterns
- Ref: 81e05e636292629114b76cbb3922fbe57672fc02
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, env\_access
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/sickn33-nextjs-app-router-patterns
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-nextjs-app-router-patterns/manifest

## Capabilities

- Structures App Router layouts, pages, loading states, errors, route handlers, and metadata.
- Explains Server and Client Component boundaries with practical examples.
- Designs Suspense-based streaming for independently loaded page sections.
- Applies parallel and intercepting routes for dashboards and modal navigation.
- Compares no-store, force-cache, timed revalidation, and tag-based cache strategies.
- Provides Server Action, route handler, and SEO metadata patterns.

## Use Cases

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

## Prompt Templates

### 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.
```

## Limitations

- Examples are illustrative and require adaptation to each project architecture.
- The skill does not verify behavior against a running Next.js application.
- Database, authentication, validation, and deployment integrations are not fully implemented.
- Framework behavior may differ across Next.js versions after 14.

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

## Anti Patterns

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

## Security Audit

- Audited at: 2026-08-04T15:53:59.311\+00:00
- Summary: 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.

## Stats

- Views: 154
- Downloads: 9
- Favorites: 0
- Popularity score: 0