All Visualizers

Next.js Visualizer

Comprehensive interactive visualizations for every Next.js concept

File System → Routes

app/
layout.tsx
page.tsx→ /
loading.tsx
error.tsx
not-found.tsx
about/
page.tsx→ /about
blog/
page.tsx→ /blog
[slug]/
page.tsx→ /blog/:slug
(marketing)/
pricing/
page.tsx→ /pricing
api/
route.ts→ GET /api

Routing Rules

●page.tsx makes a route publicly accessible
●layout.tsx wraps child pages with shared UI
●(group)/ groups routes without affecting URL
●[param]/ creates dynamic route segments
●route.ts creates API endpoint handlers

Route Resolution

Hover a route to see resolution