Various issues with typed routes in v15.5.x

[yonatanhakatan]

Summary

I've recently upgraded our website to v15.5.2 of next.js to take advantage of the new typed routes feature but i've hit a number of issues that have prevented us from enabling it. I know there are some limitations with the feature but I wanted to share to see if all the issues i'm experiencing are known limitations or maybe i'm just missing something

Additional information

The following issues can be observed from this code sandbox link: https://codesandbox.io/p/devbox/zyvxq4?embed=1&file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx

Issues:

1. If you're using localised routes then omitting the locale prefix in your Link component means you no longer get type safety (See "Problem 1" from the code sandbox link)

// no type safety
<Link href="/somethingincorrect">Incorrect path</Link>
// type safety observed
<Link href="/en/somethingincorrect">Incorrect path</Link>

(It is normally valid to omit the locale prefix as it should use the default locale)

2. The typed routes logic does not appear to consider when trailing slashes is enabled in next config via trailingSlash: true (See "Problem 2" from the code sandbox link)

// no typescript error
<Link href="/en/level1">Level 1</Link>
// typescript error
<Link href="/en/level1/">Level 1</Link>

3. There does not appear to be any type safety when using an object as the href for the Link component (See "Problem 3" from the code sandbox link)

// no typescript error
<Link href={{ pathname: "/en/somethingincorrect" }}>Incorrect path</Link>

One final issue can be observed from a different code sandbox link: https://codesandbox.io/p/devbox/next-js-typed-routes-issues-forked-6x3hgr?file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx&workspaceId=ws_PxtS69w55nJsGarF8yBZoD

4. If we have a catch-all [...rest] route to trigger the notFound() function (this is for handling any invalid paths to show a custom error message) we basically lose all type safety on our Links because the generated route types become too permissive

Example

https://codesandbox.io/p/devbox/zyvxq4?embed=1&file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx

[chungweileong94]

Agree, I faced all issues that you described before typedRoutes became stable, which made me search for other approaches at the time.

What I found is that as soon as we have a dynamic route, it might not be as type-safe as you think. For instance, let’s say you have the following routes:

• /items/[id]
• /items/add
  And you decided to change from /items/add to /items/create, you will notice that it will not throw any type errors for existing /items/add usage, as it can be considered as one of the /items/[id] routes

IMO, I don't think the current typedRoutes template literal approach is sufficient enough for complex routes use cases. I was considering solutions like https://github.com/ethanniser/next-typesafe-url, but it's too much for my liking, where I only need something simple to ensure the routes are correct, so I built my own method with a similar idea, https://gist.github.com/chungweileong94/36ed7ab6dc9a3a8dde5376adffa3d641, one downside is that, I have to define the routes manually, which is fine to me.

It would be great if NextJS can use this $path pattern in typedRoutes v2🤷‍♂️