Next Cache Tools

Manage cache tags in Next.js with type safety, grouping, and developer tools.

Features

• Typesafe cache tag management
• Organize tags in nested structures
• Fine-grained cache revalidation & updates
• Devtools to visualize your cache

Documentation »

Getting Started

pnpm install next-cache-tools

Quick Start

Tag

import { createCacheTag } from "next-cache-tools";

const userTag = createCacheTag("user", {
  getCacheId: ({ id }: { id: string }) => id,
});

async function getUser(id: string) {
  "use cache";
  userTag.tag({ id });
  return { id, name: `User ${id}` };
}

// Revalidate
userTag.revalidate({ filter: { id: "user-123" } });

Groups

import { createCacheTag, createCacheTagGroup } from "next-cache-tools";

export const cacheGroup = createCacheTagGroup("app", {
  user: {
    byId: createCacheTag("byId", {
      getCacheId: ({ id }: { id: string }) => id,
      // Optional cache life profile
      cacheLife: "minutes",
    }),
  },
});

async function getUserById(id: string) {
  "use cache";
  cacheGroup.user.byId.tag({ id });
  return { id, name: `User ${id}` };
}

// Revalidate all users
cacheGroup.user.revalidate();

// Revalidate entire group
cacheGroup.revalidate();

Devtools

Visual panel to inspect and manage cache tags in development.

See Devtools documentation for setup instructions.