Next Route Map - Free Next.js App Router Tool

Input

Output

# Next Route Map

| Route | Type | Params | Source |
| --- | --- | --- | --- |
| `/` | Page | `none` | `app/page.tsx` |
| `/api/users` | Route Handler | `none` | `app/api/users/route.ts` |
| `/blog/[slug]` | Page | `slug: string` | `app/blog/[slug]/page.tsx` |
| `/docs/[...slug]` | Page | `slug: string[]` | `app/docs/[...slug]/page.tsx` |
| `/pricing` | Page | `none` | `app/(marketing)/pricing/page.tsx` |

## Typed route hints

```ts
export type AppRoute =
  | "/"
  | "/api/users"
  | "/blog/[slug]"
  | "/docs/[...slug]"
  | "/pricing";

export type RouteParams = {
  "/": Record<string, never>;
  "/api/users": Record<string, never>;
  "/blog/[slug]": { slug: string };
  "/docs/[...slug]": { slug: string[] };
  "/pricing": Record<string, never>;
};
```

Route maps are review artifacts. Avoid sharing private file paths in links or local history.

nextjs route generator

Next.js route map helper

Paste a Next.js app directory tree or list of route files and FrameworkKit generates a Markdown route map above the fold.

App Router conventions

The parser recognizes pages, route handlers, dynamic segments, catch-all routes, optional catch-all routes, and route groups.

`page.tsx` files become page routes.
`route.ts` files become route handlers.
Route groups stay in source paths but are removed from public URLs.

Typed route hints

Generated output includes a route union and route param map that can seed typed navigation helpers or route documentation.

Route coverage audit

Use the route map before a launch or refactor to confirm that marketing pages, app pages, route handlers, and dynamic docs routes are represented in one reviewable table.

Page routes show public URLs.
Route handlers show API endpoints.
Dynamic, catch-all, and optional catch-all params are called out for validation work.

PR and QA handoff

Copy the Markdown output into pull requests, QA plans, or release notes so reviewers can scan which URLs changed and which parameters need test fixtures.

Pair with validation and metadata

After routes are mapped, validate dynamic params with Zod and generate matching metadata for public pages so route identity, canonical URLs, and runtime guards stay aligned.

What this tool does

Inspect or generate a route map from a Next.js app directory structure.

Audit App Router trees

Review dynamic params, route handlers, and typed route hints from a pasted folder tree.

Document route coverage

Create a Markdown route table for PR reviews, handoff docs, and QA route checks.

Spot dynamic params

Identify string, catch-all, and optional catch-all params before wiring typed route helpers.

Next Route Map resources

Use route map examples and App Router guidance when documenting pages, handlers, and dynamic params.

Next.js route map examples

Review route groups, catch-all segments, API route handlers, and nested source paths.

Next.js App Router route map

Map pages, route handlers, dynamic params, catch-all routes, and QA route coverage.

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.

Privacy model

Next Route Map runs in your browser. FrameworkKit does not send tool input or generated output to a server in the current app.

Guides

Next.js App Router Route Map: Pages, Route Handlers, and Dynamic Params Validate Route Params in Next.js App Router with Zod

Comparisons

Comparison pages are planned after the workflow is live.

FAQ

Does Next Route Map support App Router route groups?

Yes. Route groups such as `(marketing)` are ignored in the public URL while the original source path stays visible in the output.

Does it parse dynamic segments?

Yes. It detects `[id]`, `[...slug]`, and `[[...slug]]` segments and includes typed route parameter hints.

Is my folder tree uploaded?

No. The route map is generated in the browser from pasted text.