1. Habit
  2. Skills
  3. Next.js Cache Architecture skill
mohamed-hossam1 · 5K installs

Next.js Cache Architecture skill
Runs by itself, data or action change.

Cache tags and invalidation stay correct.

Install the Next.js Cache Architecture skill and make it a habit: follow https://gethabit.dev/skills/mohamed-hossam1/nextjs-cache-architecture.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

5K installs10 starsMIT licenceSource on GitHub ↗

Next.js Cache Architecture

by mohamed-hossam1 · 5K installs

The skill

Next.js Cache Architecture helps agents design caching in Next.js 16+ App Router: use cache, a tag registry, revalidation utilities, Suspense boundaries, personalized content and migration from unstable_cache.

Only when you ask.

The habit

Cache tags and invalidation stay correct.

↻ Runs by itselfdata or action change

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

One run, step by step.
Then it stops.

Stop ruleStops after one audit and one build per pull request.

  1. 01

    Run the audit

    Run scripts/audit.mjs on the project root to check the static parts.

  2. 02

    Check the registry

    Make sure every tag string lives in lib/cache/tags.ts.

  3. 03

    Check invalidation

    Make sure mutations call revalidation utilities and updateTag lives only in lib/cache/revalidate.ts.

  4. 04

    Walk the mistakes

    Check that use cache is the first statement, personal data is read outside the boundary and filtered pages use SuspenseOnSearchParams.

  5. 05

    Build last

    Run next build and trace any route that turned dynamic unexpectedly.

  6. 06

    Log issues

    Write each issue with its file and fix to the log.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Next.js Cache Architecture skill helps.

Use it when

  • ✓ You add caching to a Next.js app
  • ✓ You debug stale data
  • ✓ You migrate off unstable_cache

Skip it when

  • – You use the Pages Router
  • – Your app has no server data

Questions

Next.js Cache Architecture skill, answered.

When should I use updateTag versus revalidateTag?

updateTag for server actions that need fresh data now; revalidateTag with a second argument for route handlers and webhooks.

Can I call cookies() inside a cached function?

No. Read it outside the cache boundary and pass the value as an argument.

How do I install the Next.js Cache Architecture skill?

Copy the prompt at the top into your agent. It installs the skill from mohamed-hossam1/nextjs-skills and sets up the habit. Or run npx skills add mohamed-hossam1/nextjs-skills --skill nextjs-cache-architecture.

Is the Next.js Cache Architecture skill free?

Yes. It is published under MIT. Habit is free too.

Next.js Cache Architecture. Now as a habit.

Install the Next.js Cache Architecture skill and make it a habit: follow https://gethabit.dev/skills/mohamed-hossam1/nextjs-cache-architecture.md

  • Free
  • No account
  • Undo in one line

All mohamed-hossam1 skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by mohamed-hossam1, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.