[Typescript plugin] Generate Dynamic Page/Layout/Route 'params' props automatically

[johnpgr]

Goals

1. Have the page.tsx, layout.tsx and route.ts components automatically have the correct params prop object type based on the file structure.
2. Maybe have the same for the new useParams() hook.

Background

Recently the new @folder-name convention received an ergonomic improvement on the typescript on the Layout component props, as shown in this tweet: https://twitter.com/delba_oliveira/status/1646906220660551681

It automatically generates the type of the layout prop based on the folder name of the parallel route.

Currently for dynamic routes you need to manually give the params a type with the exact name of the folder.

It would be a nice improvement in DX, to have the same behavior for the params prop.

Proposal

Consider this file structure:
app/admin/users/[userId]/posts/[postId]/page.tsx

Here the correct params type is:

params: { userId: string, postId: string }

Now let's rename the folder structure to this:
app/admin/users/[userName]/posts/[postId]/page.tsx

In this case the typescript plugin would automatically be typed with the new key of userName and display errors in the IDE.

//page.tsx
export default function PostPage({params}){

    const post = await someFunc(params.userId, params.postId)
                                      //^? Property 'userId' does not exist on type '{ userName: string; postId: string; }'

}

The same applies to layout.tsx

In route.ts the second argument of the HTTP functions have the same types.

//route.ts
export function GET(req:NextRequest, {params}){
                                     //^? (parameter) params: { userName: string, postId: string }