Next.js Route Finder
A VSCode extension that helps you quickly locate Next.js pages by route path, with instant search and fuzzy matching.
Features
- Instant Search: See matching routes as you type (no need to press Enter)
- Exact Match: Find pages by their exact route path
- Fuzzy Match: Find pages even with partial route paths
- Dynamic Route Match: Support for Next.js dynamic routes (e.g.,
[id] , [slug] )
- Supports both
app/ and pages/ directories (including src/app and src/pages )
Usage
- Press
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette
- Type "Find Next.js Route" and select the command
- Start typing the route path you want to find (e.g.,
/users/[id] , /blog , user )
- The extension will:
- Instantly show all matching routes as you type
- Open the file directly if there's only one match
- Show a quick pick menu if multiple matches are found
Examples
/users/[id] - Finds dynamic user profile pages
/blog - Finds the blog index page
/products - Finds product-related pages
user - Fuzzy matches any user-related pages (e.g., user_profile , users )
[slug] - Matches any dynamic route with [slug]
Requirements
- VSCode 1.60.0 or higher
- Next.js project with an
app or pages directory (supports src/app , app , src/pages , pages )
- pnpm 8.15.4 or higher
Installation
- Clone this repository
- Run
pnpm install
- Press F5 to start debugging
- The extension will be installed in your VSCode instance
Development
# Install dependencies
pnpm install
# Compile the extension
pnpm run compile
# Watch for changes
pnpm run watch
# Run tests
pnpm test
License
This project is licensed under the MIT License.
| |