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

• 📂 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

• 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

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.

You can install from the Visual Studio Marketplace

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.

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.