next.js: Statically Typed Links not working when passing href

In file next.config.js, deactivate typedRoutes:

typedRoutes: false

The issue also applies to the official app-dir-i18n-routing example.

Reproduction

1. Create a new project derived from the example
2. Add typedRoutes: true to next.config.js
3. TS will yell at line 23 in app/[lang]/components/locale-switcher.tsx, where a dynamic href is passed to <Link>: Type 'string' is not assignable to type 'UrlObject'.ts(2322)

Tried changes

1. Typing of inner function

When I change line 10:

- const redirectedPathName = (locale: string) => {
+ const redirectedPathName = <T extends string>(locale: string): Route<T> | URL => {

I get Errors on line 11 and 14 where strings are returned, but the Link component href is fine:

Type '"/"' is not assignable to type '(T extends `/${SafeSlug<infer _ extends string>}` | `/${SafeSlug<infer _ extends string>}?${string}` | `/${SafeSlug<infer _ extends string>}#${string}` ? T : never) | URL'.ts(2322)

2. Typing of Link component

When I change line 8 and line 24:

- export default function LocaleSwitcher() {
+ export default function LocaleSwitcher<T extends string>() {
...
- <Link href={redirectedPathName(locale)}>{locale}</Link>
+ <Link<Route<T> | URL> href={redirectedPathName(locale)}>{locale}</Link>

I get a similar error to the original one (shorted version copied from VSCode tooltip):

Type 'string' is not assignable to type 'UrlObject | ((T extends `/${SafeSlug<infer _ extends string>}` | `/${SafeSlug<infer _ extends string>}?${string}` | `/${SafeSlug<infer _ extends string>}#${string}` ? T : never) extends `/${SafeSlug<...>}` | ... 1 more ... | `/${SafeSlug<...>}#${string}` ? (`/${SafeSlug<...>}` | ... 1 more ... | `/${SafeSlug<...>}#$...'.ts(2322)

EDIT: If I remove the .next/types directory no error is shown.

Hello @karlhorky Maybe you could help to solve this typescript issue?

"next": "13.4.19",

{
  experimental: {
    serverActions: true,
    typedRoutes: true,
  },
 }

import { usePathname , useRouter } from "next/navigation";

const Comp = () => {
const router = useRouter();
const pathname = usePathname();


// Argument of type 'string' is not assignable to parameter of type 'RouteImpl<string>'.ts(2345)
 router.push(pathname)
}

Thank you!

Not ideal but this fixes the linter

router.push(url as Route)

Here’s another version, in case you want to have a nested data structure containing multiplle hrefs:

import Link, { LinkProps } from 'next/link';

type Props<RouteInferred> = {
  links: {
    title: string;
    href: LinkProps<RouteInferred>['href'];
  }[];
};

export default function Links<Route>(props: Props<Route>) {
  return (
    <div>
      {props.links.map((link) => {
        return <Link href={link.href}>{link.title}</Link>;
      })}
    </div>
  );
}

Or, using Route, a bit more verbose, but also works:

import { Route } from 'next';
import Link from 'next/link';

type Props<RouteInferred extends string> = {
  links: {
    title: string;
    href: Route<RouteInferred>;
  }[];
};

export default function Links<Route extends string>(props: Props<Route>) {
  return (
    <div>
      {props.links.map((link) => {
        return <Link href={link.href}>{link.title}</Link>;
      })}
    </div>
  );
}

myProp?: UrlObject | Route<T>

This was exactly what I needed — thx as always @shuding

Hello @karlhorky Maybe you could help to solve this typescript issue?

"next": "13.4.19",

{
  experimental: {
    serverActions: true,
    typedRoutes: true,
  },
 }

import { usePathname , useRouter } from "next/navigation";

const Comp = () => {
const router = useRouter();
const pathname = usePathname();


// Argument of type 'string' is not assignable to parameter of type 'RouteImpl<string>'.ts(2345)
 router.push(pathname)
}

Thank you!

or make the type inference work:

interface CommonButtonProps<T extends string> {
    buttonText: string;
    buttonType?: string;
    buttonGo?: UrlObject | Route<T>;
}

function CommonButton<T extends string>({ buttonText, buttonType, buttonGo }: CommonButtonProps<T>) {
    return (
        <div className="mt-8 text-center">
            {buttonType === 'Link' ? (
                <Link href={buttonGo} ...

A variation on this is what we ended up doing in our application.

Here’s our version, using the imported LinkProps, with more verbose generic argument / parameter names - this will cause CardLink[href] to be type checked the same way that Link[href] is:

import Link, { LinkProps } from 'next/link';

type CardLinkProps<RouteInferred> = LinkProps<RouteInferred>;

function CardLink<Route>(props: CardLinkProps<Route>) {
  return (
    <div className="m-3 inline-block">
      <Link href={props.href}>
        {props.children}
      </Link>
    </div>
  );
}

You can either do <Link href={buttonGo as Route}>

@shuding this type assertion currently fails with the @typescript-eslint/no-unnecessary-type-assertion rule (eg. if buttonGo is a string):

This assertion is unnecessary since it does not change the type of the expression. eslint(@typescript-eslint/no-unnecessary-type-assertion)

This is a fairly new issue, since a few releases I think. Maybe I should create an issue.

As the docs says (link), you’ll have to either infer the correct link type, or cast it to Route so Next.js can statically check it.

In this example, you have buttonGo?: UrlObject | string and then pass it to <Link href={buttonGo}>. It means you are allowing any string to be the href of a link which is obviously a TS error:

interface CommonButtonProps {
    buttonText: string;
    buttonType?: string;
    buttonGo?: UrlObject | string;
}

const CommonButton: FC<CommonButtonProps> = ({ buttonText, buttonType, buttonGo }) => {
    return (
        <div className="mt-8 text-center">
            {buttonType === 'Link' ? (
                <Link href={buttonGo} className=" bg-green-600 hover:bg-green-500 text-white py-4 px-6 rounded-lg uppercase">
                    {buttonText}
                </Link>
            ) : (
                <button className="bg-green-600 hover:bg-green-500 text-white py-4 px-6 rounded-lg uppercase">
                    {buttonText}
                </button>
            )}
        </div>
    );
};

You can either do <Link href={buttonGo as Route}> to avoid the TS error or make the type inference work:

interface CommonButtonProps<T extends string> {
    buttonText: string;
    buttonType?: string;
    buttonGo?: UrlObject | Route<T>;
}

function CommonButton<T extends string>({ buttonText, buttonType, buttonGo }: CommonButtonProps<T>) {
    return (
        <div className="mt-8 text-center">
            {buttonType === 'Link' ? (
                <Link href={buttonGo} ...