nextjs-cache-architecture
Structure caching from the start in Next.js 16+ App Router projects by building a tag registry, revalidation utilities, and data-fetching functions with "use cache" directives. This skill guides you through placing cache logic on data functions rather than pages, wiring mutations to invalidation, and organizing Suspense boundaries for partial prerendering. Includes templates for tags, revalidation handlers, and patterns for personalized content near cache boundaries.
nextjs-cache-architecture helps you design and implement caching in Next.js 16+ App Router projects using the "use cache" directive and tag-based invalidation.
AI-generated summary based on this skill's SKILL.md
Install
mohamed-hossam1/nextjs-skills/nextjs-cache-architecture · repository language: JavaScript
git clone https://github.com/mohamed-hossam1/nextjs-skills
cp -r nextjs-skills/skills/nextjs-cache-architecture ~/.claude/skills/nextjs-cache-architecturenpx skillfed install mohamed-hossam1/nextjs-skills/nextjs-cache-architectureFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up caching in Next.js App Router?
nextjs-cache-architecture teaches you to structure caching from the start by placing "use cache" directives on data-fetching functions rather than pages. Build a tag registry to organize cache keys, create revalidation utilities wired to mutations, and use Suspense boundaries for partial prerendering. The skill provides templates for tags, revalidation handlers, and patterns to keep cache logic centralized and maintainable across your App Router project.
What is the nextjs-cache-architecture skill's approach to cache invalidation?
nextjs-cache-architecture emphasizes wiring mutations directly to invalidation by setting up revalidation utilities that respond to data changes. Rather than manual cache busting, you define which tags each mutation affects, then use those tags to revalidate affected cached data. The skill includes setup patterns for cache tag registries and handlers so invalidation stays predictable and tied to your data model.
How do I handle personalized or user-specific content with cache boundaries?
nextjs-cache-architecture addresses this by teaching you to place cache boundaries strategically—personalized content should live outside cached functions or use user-specific cache tags. The skill shows patterns for wrapping user-dependent logic in Suspense boundaries and organizing data fetches so that shared, cacheable content stays separate from per-user variations, enabling partial prerendering without stale personalization.
How do I migrate from unstable_cache to the new use cache directive?
nextjs-cache-architecture covers migration by showing how the "use cache" directive replaces unstable_cache with a cleaner, directive-based approach. The skill walks through converting existing unstable_cache calls to "use cache" functions, updating tag strategies, and rewiring revalidation logic. This prepares your codebase for Next.js 16+ while preserving your cache architecture's intent.
How do I debug stale or incorrectly fresh cached data in Next.js?
nextjs-cache-architecture provides troubleshooting patterns for stale data by helping you trace cache tag assignments, verify revalidation is firing on mutations, and check Suspense boundary placement. The skill teaches you to log tag registries, inspect which mutations trigger which invalidations, and validate that cache keys derive correctly from your data model, making it easier to spot why cached content isn't refreshing as expected.
What caching strategy does nextjs-cache-architecture recommend for large projects?
nextjs-cache-architecture recommends building a centralized tag registry and revalidation utilities from the start, organizing cache logic on data functions rather than pages, and using Suspense boundaries for partial prerendering. For large projects, the skill emphasizes separating cacheable shared content from personalized content, wiring mutations to specific tags, and structuring your App Router so cache decisions stay consistent and auditable across teams.
SKILL.md
rendered from the published skill — quoted content, verbatim
Next.js Cache Architecture
Architect caching in a Next.js 16+ App Router project from day one — not just
dropping "use cache" where it happens to fit, but structuring the tag
registry, revalidation utilities, Suspense boundaries, and mutation wiring so
the cache stays correct as the codebase grows.
How to use this skill
Apply every rule and template below to the user's actual project. Replace
placeholders like [Entity] and [collection] with names from their
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 11 files
skills/nextjs-cache-architecture/SKILL.md
skills/nextjs-cache-architecture/assets/SuspenseOnSearchParams.tsx
skills/nextjs-cache-architecture/assets/revalidate.ts
skills/nextjs-cache-architecture/assets/tags.ts
skills/nextjs-cache-architecture/evals/evals.json
skills/nextjs-cache-architecture/overlay.yaml
skills/nextjs-cache-architecture/references/core-concepts.md
skills/nextjs-cache-architecture/references/debugging-and-checklist.md
skills/nextjs-cache-architecture/references/migration-from-unstable-cache.md
skills/nextjs-cache-architecture/references/personalized-content.md
skills/nextjs-cache-architecture/scripts/audit.mjs