Docs: router.push and typedRoutes makes no mention of type requirements

[neilenns]

What is the documentation issue?

https://nextjs.org/docs/app/api-reference/config/typescript#statically-typed-links
https://nextjs.org/docs/app/api-reference/functions/use-router

Neither of these pages mention that if you enabled typedRoutes that router.push() also does route checking, and attempting to use constructed strings like this will result in a build error:

router.push(`${baseUrl}${filterValue}`);

Is there any context that might help us understand?

The way I fixed this was to cast the string to type Route:

import type { Route } from "next";

...

router.push(`${baseUrl}${filterValue}` as Route);

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/api-reference/functions/use-router

[sm17p]

Why should there be a need to cast it even? Next should be aware of valid typed routes and it should work for AppRoutes | PageRoutes | LayoutRoute and maybe more, rejecting handler routes

[Sparticuz]

Mine is also not accepting anything, strings included, unless I cast them as Route

[icyJoseph]

I have a PR ready to merge - just verifying how it renders the MDX - to address the documentation issue. Let me parse the other underlying issue here.

#83096

[icyJoseph]

Why should there be a need to cast it even? Next should be aware of valid typed routes and it should work for AppRoutes | PageRoutes | LayoutRoute and maybe more, rejecting handler routes

I think the problem here is that you don't have a literal string, so the type inference is lost, or rather too generic. Like if we take a step back:

function valid(string: 'foo:bar' | 'bar:foo') {}

let foobar = "foo:bar"
let foobar2 = "foo:bar" as const

let bar = 'bar'
let bar2 = 'bar' as const

valid(foobar) // error
valid("foo:bar") // good
valid(foobar2) // good
valid(`foo:${bar}`) // error
valid(`foo:${bar2}`) // good
valid("foo" + ":" + "bar") // error

So yeah, then we have to take to this observation into realm of what type info does router.push or router.replace have - and what arguments you pass.

Mine is also not accepting anything, strings included, unless I cast them as Route

Do you have some more info on your case? have you run typegen? what's not accepting anything?

[bgub]

Since we've addressed this specific issue, I'll close it. If you're still having issues with typed routes not correctly matching, open up a new issue and I'll try to address it as soon as I can!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.