Next.js App Router Route Map
Generate and audit a Next.js App Router route map with pages, layouts, route handlers, route groups, dynamic params, catch-all routes, and typed route hints.
Quick answer: what is a Next.js route map?
A Next.js route map is a readable inventory of App Router pages, route handlers, dynamic params, catch-all segments, and route groups. It helps teams review public URLs, API routes, QA coverage, and typed navigation hints before a release.
Paste an App Router tree
Start with a folder tree or a flat list of route files. Include `page.tsx` for pages, `route.ts` for route handlers, and the original source path so reviewers can trace the route back to code.
app/page.tsx app/(marketing)/pricing/page.tsx app/blog/[slug]/page.tsx app/docs/[...slug]/page.tsx app/api/users/route.ts
Pages and route handlers
The route map should separate page routes from route handlers because they have different owners and QA needs. Pages affect navigation and metadata; route handlers affect API contracts and integration tests.
- `page.tsx` files become public page routes.
- `route.ts` files become route handlers.
- Source paths stay visible so teams can jump back to the folder that owns each route.
Dynamic params and typed route hints
Dynamic segments should become explicit param hints. That makes PR review easier when a page uses `[slug]`, a catch-all route, or an optional catch-all route.
type RouteParams = {
"/blog/[slug]": { slug: string };
"/docs/[...slug]": { slug: string[] };
"/shop/[[...category]]": { category?: string[] };
};Route groups
Route groups organize code without adding URL segments. A route map should remove `(marketing)` or `(dashboard)` from the public URL while preserving the source path for maintainers.
- `app/(marketing)/pricing/page.tsx` maps to `/pricing`.
- `app/(app)/settings/page.tsx` maps to `/settings`.
- Duplicate public URLs across groups should be reviewed before release.
Catch-all and optional catch-all routes
Catch-all routes can hide many URL shapes behind one file. Mark them clearly so QA can test root, nested, and missing segment cases.
- `[...slug]` requires one or more path segments.
- `[[...slug]]` allows the base path with no segment.
- Catch-all routes should have fixtures for short, nested, and invalid paths.
QA and PR route audit workflow
Use a route map in PRs when a navigation change, migration, or release touches multiple App Router folders. The map gives QA and reviewers a compact checklist of pages and handlers to inspect.
- Confirm new pages have metadata, loading states, and not-found behavior when needed.
- Confirm route handlers have API contract tests or manual smoke coverage.
- Confirm dynamic params are documented before typed route helpers are added.
Production checklist
Before shipping a route tree change, compare the generated route map with expected product navigation, sitemap entries, and analytics paths.
- Review public URLs for accidental route group leakage.
- Check dynamic pages against sitemap or canonical URL generation.
- Pair route maps with metadata generation for new public pages.
- Keep the generated Markdown in PR notes or release QA docs when it helps reviewers.
App Router route map coverage
| Route feature | Source pattern | Route map output |
|---|---|---|
| Page route | `app/dashboard/page.tsx` | Public page path such as `/dashboard`. |
| Route handler | `app/api/users/route.ts` | API route coverage such as `/api/users`. |
| Dynamic segment | `app/blog/[slug]/page.tsx` | Param hint such as `{ slug: string }`. |
| Catch-all segment | `app/docs/[...slug]/page.tsx` | Param hint such as `{ slug: string[] }`. |
| Route group | `app/(marketing)/pricing/page.tsx` | Public URL removes the group segment and keeps source path context. |
Use FrameworkKit to generate the starter code, then review the output before shipping it in production.
Generate with Next Route MapNext Route Map resources
Next.js Route Map tool
Paste an App Router tree and generate routes, dynamic params, route handlers, and typed hints.
Next.js route map examples
Review route groups, catch-all segments, API route handlers, and nested source paths.
Validate route params with Zod
Parse App Router params and search params with Zod before using them in pages or route handlers.
Next Metadata for route pages
Generate page metadata once routes and canonical paths are known.
FAQ
Can Next.js generate a route map automatically?
Next.js defines routes from the filesystem, but teams often still need a readable route map for PR review, QA, documentation, and typed navigation planning.
Do route groups appear in public URLs?
No. App Router route groups such as `(marketing)` organize source folders and do not appear in the public URL.
What files should a route map include?
Include page files, route handler files, dynamic segments, catch-all segments, optional catch-all segments, and route groups.
Can a route map help with typed routes?
Yes. A route map can expose route unions and param hints that seed typed navigation helpers or review checklists.