# Build Better Next.js App Router Applications

App Router decisions can create unnecessary client code, stale data, and weak route structure. This skill provides concise guidance for components, fetching, routing, caching, metadata, and performance.

## Install

```bash
npx skillstore add sickn33/nextjs-best-practices
```

## Metadata

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

## Capabilities

- Chooses between Server and Client Components based on data and interaction needs.
- Recommends static, revalidated, or uncached data fetching strategies.
- Explains App Router file conventions and advanced routing patterns.
- Reviews route handlers, server actions, validation, and error handling.
- Suggests image, bundle, metadata, and loading-state improvements.
- Organizes routes and shared UI within an App Router project structure.

## Use Cases

- Plan a New App Router Feature: Select component boundaries, data flow, route files, and cache behavior before implementation.
- Review a Pull Request: Identify unnecessary client components, missing states, weak validation, and avoidable bundle costs.
- Define Team Conventions: Create consistent guidance for routing, server actions, metadata, caching, and project organization.

## Prompt Templates

### Choose a Component Type

```
Review this component requirement. Decide whether it should be a Server Component, Client Component, or split composition, and explain the decision.
```

### Plan an App Router Page

```
Plan this App Router page. Recommend route files, data fetching, loading behavior, error handling, metadata, and cache strategy.
```

### Audit a Next.js Feature

```
Review the supplied Next.js feature against App Router best practices. Prioritize findings for components, validation, caching, routing, images, and bundle size.
```

### Design a Complex Route Architecture

```
Design an App Router architecture for these requirements. Evaluate route groups, parallel routes, intercepting routes, server actions, cache invalidation, and deployment constraints.
```

## Limitations

- Provides principles and review guidance, not a complete application implementation.
- Does not inspect runtime behavior unless project files and test results are supplied.
- Does not replace version-specific Next.js documentation or migration guides.
- Requires environment-specific validation for caching, deployment, and Edge runtime behavior.

## Best Practices

- Start with Server Components and add client boundaries only for state, effects, or browser events.
- Match each data source to an explicit caching and revalidation strategy.
- Provide loading, error, and not-found states at appropriate route boundaries.

## Anti Patterns

- Do not place the client directive across entire route trees without an interaction requirement.
- Do not fetch server-accessible data in Client Components by default.
- Do not ship heavy components eagerly when dynamic loading fits the user flow.

## Security Audit

- Audited at: 2026-08-04T15:57:37.174\+00:00
- Summary: All 14 static findings are false positives caused by Markdown code fences and inline code formatting. The skill is documentation-only and contains no executable commands, prompt injection, or malicious intent.

## Stats

- Views: 123
- Downloads: 11
- Favorites: 0
- Popularity score: 0