Next.js Discord

Discord Forum

Type error trying to pass a string to <Link> component

Unanswered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Schneider’s Smooth-fronted CaimanOP
I was working on some CI automation for my project today, and the 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.

3 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:

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()