# Build Next.js Cache Components

Next.js caching can be hard to apply safely across static, cached, and dynamic content. This skill gives Claude, Codex, and Claude Code practical guidance for Cache Components.

## Install

```bash
npx skillstore add vercel-labs/next-cache-components
```

## Metadata

- Status: approved
- Slug: vercel-labs-next-cache-components
- Skillstore revision: r1
- Version status: missing
- Tree hash: 307901e7131fe7d60be3ea2a2976ec278136b213b1f6cb59ee34d1a30a4c8ad2
- Author: vercel-labs
- GitHub username: vercel-labs
- License: MIT
- Repository: https://github.com/vercel-labs/next-skills/tree/main/skills/next-cache-components/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- 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, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/vercel-labs-next-cache-components
- Manifest: https://skillstore.pages.dev/api/skills/vercel-labs-next-cache-components/manifest

## Capabilities

- Explains how to enable Cache Components with cacheComponents in next.config.ts.
- Distinguishes static, cached, and dynamic content in App Router pages.
- Shows use cache, cacheLife, cacheTag, updateTag, and revalidateTag patterns.
- Documents runtime data constraints for cookies, headers, and search parameters.
- Provides migration guidance from older Next.js caching options.
- Summarizes limitations for Edge runtime, static export, and non-deterministic values.

## Use Cases

- Plan Cache Component Adoption: Map each page section to static, cached, or dynamic rendering before changing application code.
- Review Cache Invalidation Design: Choose cache tags and invalidation methods for product, post, or dashboard data flows.
- Prepare Migration Notes: Convert older caching concepts into Cache Components terminology for an upgrade plan.

## Prompt Templates

### Classify Page Content

```
Review this Next.js page and classify each section as static, cached, or dynamic. Explain the safest Cache Components approach.
```

### Add Cached Data Loading

```
Help me add use cache and cacheLife to this data-loading component. Keep runtime request data outside the cached function.
```

### Design Tag Invalidation

```
Design cacheTag, updateTag, and revalidateTag usage for these mutation paths. Explain when each invalidation method should run.
```

### Plan a Migration

```
Create a migration plan from older Next.js caching options to Cache Components. Include risks, testing steps, and rollout order.
```

## Limitations

- It is documentation guidance, not an automated migration tool.
- It does not validate a real application against current Next.js behavior.
- It does not include tests or executable helper scripts.
- It focuses on Next.js 16 Cache Components only.

## Best Practices

- Classify rendering needs before adding cache directives.
- Keep request-specific runtime APIs outside shared cached functions.
- Use cache tags that match the data model and mutation paths.

## Anti Patterns

- Do not cache personalized data without a private cache strategy.
- Do not rely on random or time-based values inside shared cached output.
- Do not use broad invalidation when a precise tag can refresh the affected data.

## Security Audit

- Audited at: 2026-07-07T06:47:16.643\+00:00
- Summary: All static findings were reviewed against SKILL.md and appear to be false positives from Markdown syntax or educational Next.js examples. I found no prompt injection, malware intent, credential access, shell execution, or data exfiltration behavior in the skill content.

## Stats

- Views: 136
- Downloads: 21
- Favorites: 0
- Popularity score: 0