Documentation

How to use next-cache-inspector

Learn how to scan, analyze, and optimize your Next.js App Router caching strategy.

Quick Start

Install and run

npx next-cache-inspector --dir ./my-app
# or
npm install -g next-cache-inspector
next-cache-inspector --dir ./my-app

The dashboard will open at http://localhost:4242

Inspector Views

Dashboard

Get a high-level overview of your project with key metrics, route type distribution, and recent activity.

Topology

Visualize your app directory structure as an interactive graph. See how routes and layouts connect.

Flow

Understand the data flow between revalidators, tags, and routes. Spot invalidation chains at a glance.

Fetches

Review every fetch() call in your application with cache settings, revalidation periods, and tags.

Rules

Catch caching anti-patterns and misconfigurations before they cause issues in production.

CLI Options

--watch, -w

Watch for file changes and auto-rescan

next-cache-inspector --dir . --watch

--export <format>

Export report as HTML or JSON

next-cache-inspector --dir . --export html

--clean

Remove temp directories and cache files

next-cache-inspector --dir . --clean

--port, -p

Change the dashboard server port

next-cache-inspector --dir . --port 3000

Watch Mode

Automatically rescan your project when files change. Perfect for development.

npx next-cache-inspector --dir . --watch

Export Reports

Generate shareable HTML reports or JSON exports for CI/CD integration.

HTML Report

next-cache-inspector --dir . --export html

JSON Export

next-cache-inspector --dir . --export json

Best Practices

Use cache tags consistently

Tag your fetch calls so you can revalidate them precisely instead of purging entire route caches.

Set appropriate revalidate values

ISR routes should have a sensible revalidate period. Avoid mixing static and dynamic on the same route without understanding the implications.

Review anti-patterns regularly

The Rules view highlights potential issues. Address warnings early to prevent cache-related bugs.

Monitor fetch cache settings

Explicitly set cache and revalidate in fetch calls. Relying on defaults can lead to unexpected behavior across Next.js versions.

Go to Landing Page