Repository: next.js
Issue: Statically Typed Links not working when passing href
Labels: Navigation,TypeScript

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Dec 19 20:44:01 PST 2022; root:xnu-8020.240.18~2/RELEASE_X86_64
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.21
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), TypeScript

### Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/angry-scott-twxtz4?file=%2F.next%2Ftypes%2Flink.d.ts&selection=%5B%7B%22endColumn%22%3A17%2C%22endLineNumber%22%3A32%2C%22startColumn%22%3A17%2C%22startLineNumber%22%3A32%7D%5D

### To Reproduce

I've been trying server components with the new "app" directory with the `typedRoutes: true` config set too `true`.

It generates the following: routes definitions in the Next.js folder:

```ts
 type StaticRoutes = 
    | `/`
    | `/pokedex`
    | `/pokedex/create`
    | `/todo`
    | `/weather`
    | `/404.page`
    | `/404.test`
    | `/500.test`
    | `/500.page`
  type DynamicRoutes<T extends string = string> = 
    | `/pokedex/${SafeSlug<T>}`
    | `/pokedex/${SafeSlug<T>}/evolutions`
    | `/pokedex/${SafeSlug<T>}/edit`
    | `/weather/${SafeSlug<T>}`
    | `/api/${OptionalCatchAllSlug<T>}`

  type RouteImpl<T> =
    | StaticRoutes
    | `${StaticRoutes}${Suffix}`
    | (T extends `${DynamicRoutes<infer _>}${Suffix}` ? T : never)
 ```

I get a TypeScript error in a component called `<Pager>` it creates a two button 
pagination component:

```tsx
import Link from 'next/link';
import { Page } from '../../types';
import { Route } from 'next';

type Props<T extends string> = {
  page: Page<unknown>;
  hrefForPage(page: string): Route<T> | URL;
};

export function Pager<T extends string>(props: Props<T>) {
  const { page } = props;

  if (page.first && page.last) {
    return null;
  }

  const prevPage = `${page.number - 1}`;
  const nextPage = `${page.number + 1}`;

  return (
    <div>
      <Link href={props.hrefForPage(prevPage)}>
        <button disabled={page.first}>prev</button>
      </Link>
      <Link href={props.hrefForPage(nextPage)}>
        <button disabled={page.last}>next</button>
      </Link>
    </div>
  );
}
```

The idea behind the `hrefForPage` is that it is a callback function, which should return the proper url for 
the next and previous `Link`, given the `page` number as a `string`.

This differs from the [beta documentation](https://beta.nextjs.org/docs/configuring/typescript#statically-typed-links) example, as that example passes the `href` directly, with no function in between. 

Note: that I also have components which do pass the href like in the documentation, and this works like a charm.

TypeScript does not however agree that the `hrefForPage` returns the correct type:

```
> tsc --version && tsc --noEmit

Version 5.0.2
src/components/Pager/Pager.tsx:22:13 - error TS2322: Type 'URL | Route<T>' is not assignable to type 'UrlObject | RouteImpl<URL>'.
  Type 'T extends `/pokedex/${SafeSlug<infer _ extends string>}` | `/pokedex/${SafeSlug<infer _ extends string>}/edit` | `/pokedex/${SafeSlug<infer _ extends string>}/evolutions` | `/weather/${SafeSlug<infer _ extends string>}` | ... 10 more ... | `/api/${OptionalCatchAllSlug<...>}#${string}` ? T : never' is not assignable to type 'UrlObject | RouteImpl<URL>'.
    Type '(`/pokedex/${string}` | `/pokedex/${string}/edit` | `/pokedex/${string}/evolutions` | `/weather/${string}` | `/api/${string}` | `/pokedex/${string}?${string}` | `/pokedex/${string}#${string}` | `/pokedex/${string}/edit?${string}` | `/pokedex/${string}/edit#${string}` | `/pokedex/${string}/evolutions?${string}` | `/p...' is not assignable to type 'UrlObject | RouteImpl<URL>'.
      Type '`/pokedex/${string}` & T' is not assignable to type 'UrlObject | RouteImpl<URL>'.
        Type '`/pokedex/${string}` & T' is not assignable to type 'UrlObject'.
          Type 'T extends `/pokedex/${SafeSlug<infer _ extends string>}` | `/pokedex/${SafeSlug<infer _ extends string>}/edit` | `/pokedex/${SafeSlug<infer _ extends string>}/evolutions` | `/weather/${SafeSlug<infer _ extends string>}` | ... 10 more ... | `/api/${OptionalCatchAllSlug<...>}#${string}` ? T : never' is not assignable to type 'UrlObject'.
            Type '(`/pokedex/${string}` | `/pokedex/${string}/edit` | `/pokedex/${string}/evolutions` | `/weather/${string}` | `/api/${string}` | `/pokedex/${string}?${string}` | `/pokedex/${string}#${string}` | `/pokedex/${string}/edit?${string}` | `/pokedex/${string}/edit#${string}` | `/pokedex/${string}/evolutions?${string}` | `/p...' is not assignable to type 'UrlObject'.
              Type '`/pokedex/${string}` & T' is not assignable to type 'UrlObject'.
                Types of property 'search' are incompatible.
                  Type '{ (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }' is not assignable to type 'string'.

22       <Link href={props.hrefForPage(prevPage)}>
               ~~~~

  .next/types/link.d.ts:78:5
    78     href: __next_route_internal_types__.RouteImpl<T> | UrlObject
           ~~~~
    The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & LinkRestProps & { href: UrlObject | RouteImpl<URL>; }'

src/components/Pager/Pager.tsx:25:13 - error TS2322: Type 'URL | Route<T>' is not assignable to type 'UrlObject | RouteImpl<URL>'.

25       <Link href={props.hrefForPage(nextPage)}>
               ~~~~

  .next/types/link.d.ts:78:5
    78     href: __next_route_internal_types__.RouteImpl<T> | UrlObject
           ~~~~
    The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & LinkRestProps & { href: UrlObject | RouteImpl<URL>; }'


Found 2 errors in the same file, starting at: src/components/Pager/Pager.tsx:22
```




### Describe the Bug

TypeScript gives an error whenever a callback function returns `Route<T> | URL` when passing the result of that callback function to the `href` prop of the `Link` component.

### Expected Behavior

I expect that TypeScript thinks that the result of a  function that returns `Route<T> | URL` should be valid.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_