Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Next.js Routing VisualizerNew to Visual Studio Code? Get it now.
Next.js Routing Visualizer

Next.js Routing Visualizer

Alia Sadiq

|
10 installs
| (1) | Free
📍 Visualize Next.js routing structure and simulate navigation.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🧭 Next.js Smart Routing Visualizer

A powerful and elegant VS Code extension that visualizes your Next.js routes in a sidebar — supporting both pages/ and app/ directories. Easily detect and explore dynamic segments like [slug], [...params], and [[...optional]] in a tree structure.

Next.js Route Tree Preview


🚀 Features

  • 📂 Displays all routes from pages/ and app/ directories
  • 🧩 Highlights dynamic route segments:
    • [slug] → dynamic
    • [...slug] → catch-all
    • [[...slug]] → optional catch-all
  • 🎯 Inline file navigation (click to open route file)
  • 🖼️ Custom icons for:
    • App routes
    • Page routes
    • Dynamic / Catch-all routes
  • ♻️ Auto-refresh on file changes
  • 🔎 Highlights route parameters

🛠️ How It Works

  • Parses all *.js, *.ts, *.jsx, *.tsx files inside pages/ and app/ directories
  • Ignores node_modules
  • Replaces dynamic segments ([slug]) with symbolic labels (e.g., :slug)
  • Maps route files into a collapsible VS Code TreeView

🧑‍💻 Usage

  1. Open a Next.js project in VS Code.
  2. Open the sidebar panel called Next.js Routes.
  3. Explore your route structure interactively.
  4. Click any route to open the corresponding file.

📦 Installation

You can install from the Visual Studio Marketplace

👐 Open Source

This project is open source and licensed under the MIT License.
You're welcome to explore, contribute, report issues, or fork it for your own needs.

🤝 Contributing

Contributions are welcome! Feel free to:

  • Open issues for bugs or feature requests
  • Submit pull requests
  • Share feedback or ideas

Please see the CONTRIBUTING.md for guidelines.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft