Devtools

The package includes a development-only devtools panel for inspecting and managing cache tags.

Devtools Panel

Setup

1. Configure the Cache Handler

Add the devtools cache handler to your next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheHandlers: {
    default: require.resolve("next-cache-tools/devtools/cache-handler"),
  },
  cacheComponents: true,
};

export default nextConfig;

2. Add the Devtools Component

Add the devtools component to your root layout:

import { CacheDevTools } from "next-cache-tools/devtools";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        <CacheDevTools />
      </body>
    </html>
  );
}

Features

The devtools panel will automatically appear in development mode, providing:

All cache tags with their associated data
Search functionality to quickly find specific tags
Individual tag revalidation for targeted cache invalidation

For tags created by next-cache-tools:

Grouped tags organized by namespace
Group revalidation to invalidate entire tag groups

Development Only

The devtools panel is automatically disabled in production builds. It only appears when NODE_ENV is set to "development", ensuring no performance impact on your production application.