Next.js Unused Media Checker

English | 日本語

A powerful VS Code extension that automatically detects unused media files in your Next.js project's public directory, helping you optimize your bundle size and keep your codebase clean, and be very useful for refactoring.

Key Features

Visual File Decorations: Instantly see unused (!) and used (✓) media files directly in the Explorer
High Performance: Parallel processing with smart batching for large projects
Smart Detection: Finds references in JS/TS, CSS, HTML, JSON, and Markdown files
Multilingual: English and Japanese interface support
Highly Configurable: Customize file types, exclude patterns, and directories
Zero Dependencies: No external services - all processing happens locally

Supported File Types

Images: .jpg, .jpeg, .png, .gif, .svg, .webp, .ico, .avif, .bmp, .tiff
Videos: .mp4, .webm, .avi, .mov
Audio: .mp3, .ogg, .wav

Quick Start

Installation

Install from VS Code Marketplace
Or search "Next.js Unused Media Checker" in VS Code Extensions tab

Usage

Open your Next.js project in VS Code
Run command: Ctrl/Cmd + Shift + P → Check Unused Media Files
View results instantly in the Explorer:
- ！ Red warning = Unused media files
- ✓ Green check = Used media files
Manage files: Click notification to open public folder

How It Works

The extension performs intelligent analysis to detect media file usage across your entire project:

Scan Targets

JavaScript/TypeScript: .js, .jsx, .ts, .tsx
Stylesheets: .css, .scss, .sass, .less
Markup: .html, .md, .mdx
Data: .json

Detection Patterns

Direct imports: import logo from '/logo.png'
Next.js Image: <Image src="/hero.jpg" />
CSS backgrounds: background: url('/bg.png')
Dynamic references: Template literals and computed paths
Case-insensitive: Matches regardless of filename casing

Configuration

Customize the extension behavior via VS Code settings (Settings → search "nextjs unused"):

Setting	Description	Default
`publicDirectory`	Directory to scan for media files	`"public"`
`mediaExtensions`	File extensions to consider as media	`[".jpg", ".png", ...]`
`excludePatterns`	Patterns to exclude from search	`["/node_modules/", ...]`

Example Configuration

{
  "nextjs-unused-media-checker.publicDirectory": "assets",
  "nextjs-unused-media-checker.excludePatterns": [
    "**/node_modules/**",
    "**/build/**",
    "**/.next/**"
  ],
  "nextjs-unused-media-checker.mediaExtensions": [
    ".jpg",
    ".png",
    ".gif",
    ".svg",
    ".webp"
  ]
}

Performance Features

Parallel Processing: Batch processing with Promise.all for maximum speed
Smart Filtering: Skips large files (>1MB) automatically
Optimized Data Structures: Set/Map usage for O(1) lookups
Cancellable Operations: User can stop long-running scans
Memory Efficient: Processes files in small batches

Development

Interested in contributing? See our Contributing Guide for detailed setup instructions.

Quick Development Setup

# Clone and setup
git clone https://github.com/Takanaz/nextjs-unused-media-checker.git
cd nextjs-unused-media-checker
npm install

# Start development
npm run watch    # Auto-rebuild on changes
# Press F5 in VS Code to launch extension host

# Available commands
npm run compile      # Build extension
npm run test         # Run tests
npm run lint         # Run ESLint
npm run package      # Create VSIX package