Type error trying to pass a string to <Link> component
Unanswered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Schneider’s Smooth-fronted CaimanOP
I was working on some CI automation for my project today, and the
This has worked fine in this repo since I originally wrote it, and matches the example shown in the [Link documentation](https://nextjs.org/docs/app/api-reference/components/link).
Did something change here in a recent release? I dug into the type definition locally and sure enough href is defined as
next build step failed with a type error trying to pass a string to the <Link> component:import Link from "next/link";
...
<Link href={href}>{label}</Link>Type error: Type 'string' is not assignable to type 'UrlObject | RouteImpl<string>'.This has worked fine in this repo since I originally wrote it, and matches the example shown in the [Link documentation](https://nextjs.org/docs/app/api-reference/components/link).
Did something change here in a recent release? I dug into the type definition locally and sure enough href is defined as
__next_route_internal_types__.RouteImpl<RouteInferType> | UrlObject, with no mention of string being valid.10 Replies
Schneider’s Smooth-fronted CaimanOP
Interesting. I've enabled route type safety in this repo. So how do you pass in dynamic routes to the link? The documentation doesn't mention this at all.
Schneider’s Smooth-fronted CaimanOP
I was able to fix the Link usages by converting to this:
I get a similar error trying to do router.push:
import type { Route } from "next";
...
<Link href={href as Route}>{label}</Link>I get a similar error trying to do router.push:
router.push(`${baseUrl}${filterValue}`);Argument of type 'string' is not assignable to parameter of type 'RouteImpl<string>'.Schneider’s Smooth-fronted CaimanOP
Opened a doc bug for
router.push()afaik its like this
// example
export const routes = {
products: {
id: ({ id }: { id: string }) => ({
pathname:
id,
}),
idSlug: ({ id, slug }: { id: string; slug: string }) => ({
pathname:
id,
slug,
}),
},
};
import Link from "next/link";
import { routes } from
const ProductLink = ({ id, slug, label }: { id: string; slug: string; label: string }) => {
return <Link href={routes.products.idSlug({ id, slug })}>{label}</Link>;
};
export const routes = {
products: {
id: ({ id }: { id: string }) => ({
pathname:
/products/${id},id,
}),
idSlug: ({ id, slug }: { id: string; slug: string }) => ({
pathname:
/products/${id}/${slug},id,
slug,
}),
},
};
import Link from "next/link";
import { routes } from
const ProductLink = ({ id, slug, label }: { id: string; slug: string; label: string }) => {
return <Link href={routes.products.idSlug({ id, slug })}>{label}</Link>;
};
try something like this
@Schneider’s Smooth-fronted Caiman
Schneider’s Smooth-fronted CaimanOP
My understanding is the routes definition is auto-generated, I don't need to do it myself. I'm not constructing a complicated string either, I'm just using an URL from a defined list of stuff for my navigation menu.
Looking into their docs a little deeper, in one situation I can change my data type definition, they have an example that covers the scenario I'm doing: https://nextjs.org/docs/app/api-reference/config/typescript#statically-typed-links
Looking into their docs a little deeper, in one situation I can change my data type definition, they have an example that covers the scenario I'm doing: https://nextjs.org/docs/app/api-reference/config/typescript#statically-typed-links
anyway, they said in my doc bug they were doing a big update to the docs this week with more info on this stuff anyway