How can I specify "any local pathname" as a prop with typedRoutes enabled?

[ravinggenius]

Summary

I've enabled typedRoutes. How can I wrap Link without getting type errors on internal HREFs when using my custom component?

Additional information

The LinkProps type takes RouteInferType as a type argument (without restrictions) and passes it directly to __next_route_internal_types__.RouteImpl. RouteImpl in turn uses it like

(T extends `${DynamicRoutes<infer _>}${Suffix}\` ? T : never)

Here's my styled anchor component. Passing string to LinkProps works for defining the component...

import classNames from "classnames";
import Link, { LinkProps } from "next/link";
import { AnchorHTMLAttributes, ComponentProps } from "react";

import { Interactive } from "../_/interactive/interactive";

import styles from "./Anchor.module.scss";

export default function Anchor({
	children,
	className,
	variant, // from Interactive
	...linkProps
}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> &
	LinkProps<string> &
	Interactive & {
		children: string;
		className?: string;
	}) {
	return (
		<Link
			{...linkProps}
			className={classNames(styles.anchor, className)}
			data-variant={variant}
		>
			{children}
		</Link>
	);
}

export type AnchorProps = ComponentProps<typeof Anchor>;
export type InternalHref = AnchorProps["href"];

... but I still get an error (below) when I use it. The error is on the href prop name:

<Anchor
	href={`/${locale}/command/platforms/${platformId}`}
	variant="inline"
>
	{t("name.value", { name })}
</Anchor>

Type '`/en-US/command/platforms/${string}`' is not assignable to type 'UrlObject | RouteImpl<string>'. ts(2322)

(locale is type en-US, and platformId is type string.)

I noticed when I cast the string template literal, the error goes away, and my code compiles and runs fine:

<Anchor
	href={`/${locale}/command/platforms/${platformId}` as InternalHref}
	variant="inline"
>
	{t("name.value", { name })}
</Anchor>

Is this my only option? It seems really hacky to have to cast all of my links. Interestingly I don't get an error if I use Link directly, even if I don't cast with InternalHref:

<Link href={`/${locale}/command/platforms/${platformId}`}>
	{t("name.value", { name })}
</Link>

Example

I copied a minimal Anchor component to this gist.

[ravinggenius]

(Sorry for all the edits. I was having trouble with the formatting.

[Shreyashpatil2605]

You can extract href type directly from link and use it like this " export type InternalHref = LinkProps["href"] "

[ravinggenius]

I know, but that doesn't address the problem of having to cast as InternalHref everywhere I write a link.

[Shreyashpatil2605]

I think it seems really hacky to have to cast all of the links because
typedRoutes is not a type level feature; it’s a compiler transform that only recognizes next/link and next/navigation exports.

works with no cast.

[ravinggenius]

I think it seems really hacky to have to cast all of the links because

I agree. This is the crux of my problem.

typedRoutes is not a type level feature; it’s a compiler transform that only recognizes next/link and next/navigation exports.
works with no cast.

Pardon me, but why was it named typedRoutes if it isn't a type-level feature?

[ravinggenius]

What would be a better type to pass to LinkProps? string feels like such a sledgehammer.

[Shreyashpatil2605]

just reuse the exact href type from LinkProps

[ravinggenius]

That's what I ended up doing. I've updated Anchor.tsx to:

import classNames from "classnames";
import Link, { LinkProps } from "next/link";
import { ComponentProps } from "react";

import { Interactive } from "@/components/_/interactive/interactive";

import styles from "./Anchor.module.scss";

export default function Anchor<HREF>({
	children,
	className,
	variant,
	...linkProps
}: LinkProps<HREF> &
	Interactive & {
		children: string;
		className?: string;
	}) {
	return (
		<Link
			{...linkProps}
			className={classNames(styles.anchor, className)}
			data-variant={variant}
		>
			{children}
		</Link>
	);
}

export type AnchorProps<HREF> = ComponentProps<typeof Anchor<HREF>>;
export type AnchorHref<HREF> = AnchorProps<HREF>["href"];

The odd thing is that sometimes the cast is needed, and sometimes it isn't. I can't even predict if the cast will be needed.

[icyJoseph]

Could we take a step back? Is this what you want?

import Link from "next/link";

import type { Route } from 'next'

export function MyLink({ href }: { href: Route }) {
  return <Link href={href}>My Link</Link>
}

[ravinggenius]

I took the screenshots above while the dev server was running. I re-tried each version of AnchorProps above and ran the typegen command after each, but the type errors remain.

The route does exist, and the project builds without issue with the version of Anchor shown above (#83259 (reply in thread)):

[ravinggenius]

You may examine the project: https://github.com/ravinggenius/minecraft-tools. The branch of interest is admin-ui if you want to take a closer look.

[icyJoseph]

Mm for now I arrived at the same too - it is not possible right now - or at least I can't with my TS tricks - to try and narrow down to the DynamicRoutes only, with a SafeSlug [locale], and extract the Rest of the path -

[ravinggenius]

Are you familiar with the code that generates the DynamicRoute union? If I could hook into it, I could build the structure I mentioned above.

[icyJoseph]

it's closed - in a way - you'd need to trace the typegen process.

I'd say, maybe this is part of an incremental iteration on this feature? Which AFAIK lives here #82955 - the PR motivation is on point right?

I'd say, let's wait to see if this comes in a next follow up.