next-typed-routes
Transform Next.js page.tsx components to use typed route props types based on their file path location.
How to run?
bash
This codemod automatically transforms Next.js App Router page and layout components to use PageProps<"/foo/bar"> and LayoutProps<"/foo"> types based on their file system location.
What it does:
- Converts manual prop type definitions to typed route props
- Automatically infers the route path from the file location
- Handles dynamic routes like [id], [slug], etc.
- Skips route groups like (group) in the path
- Skips parallel routes like @modal, @auth in the path
- Supports both page and layout components
Examples:
Before:
tsx
After:
tsx
Route path resolution:
- /home/user/project/src/app/page.tsx → PageProps<"/">
- /home/user/project/src/app/foo/page.tsx → PageProps<"/foo">
- /home/user/project/src/app/foo/[id]/page.tsx → PageProps<"/foo/[id]">
- /home/user/project/src/app/(group)/foo/page.tsx → PageProps<"/foo"> (group ignored)
- /home/user/project/src/app/@modal/login/page.tsx → PageProps<"/login"> (parallel route ignored)
- /home/user/project/src/app/foo/layout.tsx → LayoutProps<"/foo">
Requirements:
- Next.js App Router project structure
- TypeScript files with .tsx extension
- Page or layout components exported as default exports
- Components must be function declarations, function expressions, or arrow functions