From b25407e4e4b7dc437a77f93b13ed3f28d66a2b69 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Fri, 18 Aug 2023 16:41:21 +0200
Subject: [PATCH] Add `Route` and `LinkProps` stub generics (#54226)

Closes #53732. Closes #52929.

When using the statically typed routes feature, we might have code like:

```ts
export function Card<T extends string>({ href }: { href: Route<T> | URL })...
export function Card<T extends string>({ href }: LinkProps<T>)...
```

To statically check `<Card href={...}>` and make sure it's `href` is an existing route. However, in certain cases these route types are not generated (e.g. running `tsc` directly w/o a `next dev` or `next build`), which results in TS errors.

This PR adds stub generics to `Route` and `LinkProps` so even if that plugin isn't executed, these types will not block type checking.
---
 .../src/build/webpack/plugins/next-types-plugin/index.ts    | 4 ++--
 packages/next/src/client/link.tsx                           | 6 +++++-
 packages/next/types/index.d.ts                              | 6 +++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/next/src/build/webpack/plugins/next-types-plugin/index.ts b/packages/next/src/build/webpack/plugins/next-types-plugin/index.ts
index 560cbdfff9..2be12daecd 100644
--- a/packages/next/src/build/webpack/plugins/next-types-plugin/index.ts
+++ b/packages/next/src/build/webpack/plugins/next-types-plugin/index.ts
@@ -428,12 +428,12 @@ declare module 'next/link' {
     'href'
   >
 
-  export type LinkProps<T> = LinkRestProps & {
+  export type LinkProps<RouteInferType> = LinkRestProps & {
     /**
      * The path or URL to navigate to. This is the only required prop. It can also be an object.
      * @see https://nextjs.org/docs/api-reference/next/link
      */
-    href: __next_route_internal_types__.RouteImpl<T> | UrlObject
+    href: __next_route_internal_types__.RouteImpl<RouteInferType> | UrlObject
   }
 
   export default function Link<RouteType>(props: LinkProps<RouteType>): JSX.Element
diff --git a/packages/next/src/client/link.tsx b/packages/next/src/client/link.tsx
index 39fd9ecbd0..3c8ed097c9 100644
--- a/packages/next/src/client/link.tsx
+++ b/packages/next/src/client/link.tsx
@@ -103,7 +103,11 @@ type InternalLinkProps = {
 
 // TODO-APP: Include the full set of Anchor props
 // adding this to the publicly exported type currently breaks existing apps
-export type LinkProps = InternalLinkProps
+
+// `RouteInferType` is a stub here to avoid breaking `typedRoutes` when the type
+// isn't generated yet. It will be replaced when the webpack plugin runs.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type LinkProps<RouteInferType = any> = InternalLinkProps
 type LinkPropsRequired = RequiredKeys<LinkProps>
 type LinkPropsOptional = OptionalKeys<InternalLinkProps>
 
diff --git a/packages/next/types/index.d.ts b/packages/next/types/index.d.ts
index 4cd41289c1..87a95f55b2 100644
--- a/packages/next/types/index.d.ts
+++ b/packages/next/types/index.d.ts
@@ -47,7 +47,11 @@ export type {
  * router.push(returnToPath as Route)
  * ```
  */
-export type Route = string & {}
+
+// `RouteInferType` is a stub here to avoid breaking `typedRoutes` when the type
+// isn't generated yet. It will be replaced when the webpack plugin runs.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type Route<RouteInferType = any> = string & {}
 
 // Extend the React types with missing properties
 declare module 'react' {