Stop getting lost in the Next.js App Router: I built an open-source visualizer

Yash Kumar Gupta — Tue, 16 Dec 2025 10:39:35 +0000

I love the Next.js App Router, but let's be honest: once your project grows beyond 10 pages, the file structure gets messy.

You end up with deeply nested folders, page.tsx files everywhere, and it becomes impossible to visualize the actual user flow just by looking at the file explorer.

The Problem: VS Code shows you a list of files. It doesn't show you the architecture.

The Solution: Troql I spent the weekend building a tool to fix this. Troql parses your GitHub repository and generates an interactive node-map of your entire application structure.

Key Features:

🗺️ Visualizes Layouts vs Pages: See exactly which layouts wrap which routes.

⚡ Direct VS Code Integration: Click any node in the map to instantly open that specific file directly in your VS Code editor.

🔒 100% Client-side: It uses Babel AST to parse the code securely in your browser.

How it's built (The Tech Stack):

Framework: Next.js (obviously)

Parsing: Babel AST (to read the file structure)

Visualization: React Flow (for the node graph)

It’s fully open-source. I’m looking for feedback on the visualization logic—does it handle your (groups) and [dynamic] routes correctly?

🔗 Try it live: https://www.troql.com/demo
💻 Source Code: https://github.com/yashkr321/troql

Let me know what you think in the comments! 👇

⚠️ Note on Performance (Groq API)

To keep this project open and free, the live demo is currently running on the Groq Free API.

The Good: It's blazing fast ⚡

The Bad: You might hit a rate limit if too many people use it at once.

If it stalls, please give it a minute and try again! I plan to upgrade to the Pro tier soon for better stability.

DEV Community: Yash Kumar Gupta

Stop getting lost in the Next.js App Router: I built an open-source visualizer