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: Smart batching + candidate extraction from url() and string literals for large projects
• Smart Detection: Finds references in JS/TS, CSS, HTML, JSON, and Markdown files (query/hash in URLs supported)
• 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

1. Install from VS Code Marketplace
2. Or install from Open VSX Registry (for Cursor, VSCodium, etc.)
3. Or search "Next.js Unused Media Checker" in the Extensions tab

Usage

1. Open your Next.js project in VS Code
2. Run command: Ctrl/Cmd + Shift + P → Check Unused Media Files
3. View results instantly in the Explorer:
   • ！ Red warning = Unused media files
   • ✓ Green check = Used media files
4. 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"):

{
  "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, and workspace-friendly file IO
• Cancellable Operations: User can stop long-running scans
• Memory Efficient: Processes files in small batches

Development

Interested in contributing? Check out our development resources:

• Developer Guide - Comprehensive development setup and workflow (also available in Japanese: DEVELOPER.ja.md)
• Contributing Guidelines - How to contribute to the project (also available in Japanese: CONTRIBUTING.ja.md)

For a quick start, see the Environment Setup section in the Developer Guide.