🚀 Next.js Route Visualizer - MIND-BLOWING EDITION

A stunning Visual Studio Code extension that transforms how you work with Next.js routes! Featuring beautiful icons, smart actions, and productivity superpowers! ✨

📦 Quick Installation

Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
Search for "Next.js Route Visualizer"
Click Install on the extension by Haffar Med Sadok
Enjoy! 🎉

Or install via command line:

code --install-extension HaffarMedSadok.nextjs-route-visualizer

🎯 INCREDIBLE NEW FEATURES

🎨 Beautiful Visual Experience

🌈 Color-coded route types with gorgeous themed icons
📊 Real-time file size display for each route
⚡ Smart route indicators (protected, tested, dynamic)
📈 Live statistics in the sidebar

🔍 Lightning-Fast Search

🔎 Instant route filtering - search by name, path, or file
⌨️ Keyboard shortcuts for power users
🎯 Smart matching across all route properties

⚡ Smart Context Actions

Right-click any route for mind-blowing productivity:

✨ Create New Route with beautiful templates
� Duplicate Route with one click
🌐 Open in Browser with custom dev server
� Reveal in Explorer for quick file access
� Copy Route Path to clipboard
🗑️ Safe Delete with confirmation

🎯 Route Intelligence

🔒 Protected Route Detection - automatically finds auth/middleware
✅ Test Coverage Indicators - shows which routes have tests
📦 Bundle Size Estimates - see file sizes at a glance
⚙️ Dynamic Route Highlighting - special treatment for [param] routes

🌟 What Makes This AMAZING

Feature	Description	Visual
🎨 Smart Icons	Color-coded by route type	📄🎨⚡🔌❌⏳
📊 Live Stats	Real-time route analytics	`Routes: 15 \\| Files: 23 \\| Size: 145KB`
🔍 Super Search	Find anything instantly	Type to filter routes live
⚡ Quick Actions	Right-click magic	Create, duplicate, delete, open
🛡️ Smart Detection	Auto-finds protected routes	🔒 indicator for auth routes
✅ Test Awareness	Shows test coverage	✅ for routes with tests

🚀 Quick Start

Install the extension
Open your Next.js project
See the magic in Explorer sidebar → "Next.js Routes"
Right-click any route for superpowers!

🎯 Supported Features

📁 Project Types

✅ App Router (Next.js 13+) - Full support
✅ Pages Router (Next.js 12) - Full support
✅ TypeScript & JavaScript - Both supported
✅ Src directory - /src/app and /src/pages

🎨 Route Types with Beautiful Icons

Type	Icon	Color	Description
Page	📄	🟢 Green	Regular page routes
Dynamic	⚡	🟣 Purple	`[param]` routes
Layout	🎨	🟠 Orange	Layout components
Loading	⏳	🟡 Yellow	Loading UI
Error	❌	🔴 Red	Error boundaries
API	🔌	⚪ White	API endpoints

🎯 Smart Indicators

Indicator	Meaning
🔒	Protected route (has auth/middleware)
✅	Has test files
⚡	Dynamic route
📦 125KB	File size

🔥 Power User Features

🎯 Create Routes Like a Pro

Right-click → "Create New Route"
Enter: "blog/[slug]" 
→ Creates: /app/blog/[slug]/page.tsx
→ With beautiful boilerplate!

🔍 Search Like Lightning

Click search icon → Type "api"
→ Instantly filters to API routes
→ Search by name, path, or file!

📊 Live Statistics

See real-time project insights:

📊 Total Routes: 15
📁 Total Files: 23
📦 Total Size: 145KB
⚡ Dynamic Routes: 3
🔌 API Routes: 5

🛠️ Available Commands

Command	Shortcut	Action
🔄 Refresh	Button	Rescan all routes
🔍 Search	Button	Filter routes
➕ Create	Right-click	New route with template
📋 Duplicate	Right-click	Copy route structure
🌐 Open Browser	Right-click	Preview in browser
📁 Reveal	Right-click	Show in file explorer
📄 Copy Path	Right-click	Copy route URL
🗑️ Delete	Right-click	Safe delete with confirm

⚡ Performance Features

🚀 Lightning Fast - Instant route scanning
📱 Memory Efficient - Smart caching
🔄 Auto-Refresh - Watches file changes
⚡ Lazy Loading - Loads routes on demand

🎨 Beautiful Templates

App Router Template

import React from 'react';

export default function BlogPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-4">
        Blog Page
      </h1>
      <p className="text-gray-600">
        Welcome to the /blog route!
      </p>
    </div>
  );
}

export async function generateMetadata() {
  return {
    title: 'Blog',
    description: 'Description for /blog',
  };
}

Pages Router Template

import React from 'react';
import Head from 'next/head';

export default function BlogPage() {
  return (
    <>
      <Head>
        <title>Blog</title>
        <meta name="description" content="Description for /blog" />
      </Head>
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-4">
          Blog Page
        </h1>
        <p className="text-gray-600">
          Welcome to the /blog route!
        </p>
      </div>
    </>
  );
}

🤝 Why Developers LOVE This

"This extension completely changed how I work with Next.js! The visual indicators and quick actions save me hours." - React Developer

"The search feature is incredible - I can find any route instantly in large projects!" - Full-Stack Developer

"Creating new routes with templates is a game-changer. No more copy-pasting boilerplate!" - Frontend Lead

🚀 Coming Soon

🔗 Route relationships diagram
📈 Performance analytics
🎯 SEO analysis for routes
👥 Team collaboration features
🔧 Custom templates support

Made with ❤️ for the Next.js community by Haffar Med Sadok

Transform your Next.js development experience today! ✨

👨‍💻 Author

Haffar Med Sadok - Software Engineer
🌐 Portfolio: www.haffarmedsadok.me
📧 Contact: contact@haffarmedsadok.me

📜 Release Notes

1.0.0

🚀 Initial release with mind-blowing features
🎨 Beautiful color-coded route visualization
🔍 Lightning-fast search and filtering
⚡ Smart context actions and route creation
🛡️ Intelligent route detection and indicators

📄 License

MIT License - Feel free to use and contribute!

🤝 Contributing

We welcome contributions! Please feel free to submit issues and pull requests.

Enjoy building amazing Next.js applications! 🚀