Add experimental touchstart flag for testing (#61747)

Adds an experimental flag to allow us to validate `touchstart` handling x-ref: [slack thread](https://vercel.slack.com/archives/C03S8ED1DKM/p1707269419316909?thread_ts=1707256828.309319&cid=C03S8ED1DKM) Closes NEXT-2384
vercel · Feb 7, 2024 · 56cf916 · 56cf916
1 parent 86c46ed
commit 56cf916
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 37 deletions.
diff --git a/packages/next/src/build/webpack/plugins/define-env-plugin.ts b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
@@ -207,6 +207,9 @@ export function getDefineEnv({
     'process.env.__NEXT_WEB_VITALS_ATTRIBUTION': JSON.stringify(
       config.experimental.webVitalsAttribution
     ),
+    'process.env.__NEXT_LINK_NO_TOUCH_START': JSON.stringify(
+      config.experimental.linkNoTouchStart
+    ),
     'process.env.__NEXT_ASSET_PREFIX': JSON.stringify(config.assetPrefix),
     ...(isNodeOrEdgeCompilation
       ? {

diff --git a/packages/next/src/client/link.tsx b/packages/next/src/client/link.tsx
@@ -592,7 +592,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
     ])
 
     const childProps: {
-      onTouchStart: React.TouchEventHandler<HTMLAnchorElement>
+      onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>
       onMouseEnter: React.MouseEventHandler<HTMLAnchorElement>
       onClick: React.MouseEventHandler<HTMLAnchorElement>
       href?: string
@@ -680,43 +680,45 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
           isAppRouter
         )
       },
-      onTouchStart(e) {
-        if (!legacyBehavior && typeof onTouchStartProp === 'function') {
-          onTouchStartProp(e)
-        }
-
-        if (
-          legacyBehavior &&
-          child.props &&
-          typeof child.props.onTouchStart === 'function'
-        ) {
-          child.props.onTouchStart(e)
-        }
-
-        if (!router) {
-          return
-        }
-
-        if (!prefetchEnabled && isAppRouter) {
-          return
-        }
-
-        prefetch(
-          router,
-          href,
-          as,
-          {
-            locale,
-            priority: true,
-            // @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
-            bypassPrefetchedCheck: true,
-          },
-          {
-            kind: appPrefetchKind,
+      onTouchStart: process.env.__NEXT_LINK_NO_TOUCH_START
+        ? undefined
+        : function onTouchStart(e) {
+            if (!legacyBehavior && typeof onTouchStartProp === 'function') {
+              onTouchStartProp(e)
+            }
+
+            if (
+              legacyBehavior &&
+              child.props &&
+              typeof child.props.onTouchStart === 'function'
+            ) {
+              child.props.onTouchStart(e)
+            }
+
+            if (!router) {
+              return
+            }
+
+            if (!prefetchEnabled && isAppRouter) {
+              return
+            }
+
+            prefetch(
+              router,
+              href,
+              as,
+              {
+                locale,
+                priority: true,
+                // @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
+                bypassPrefetchedCheck: true,
+              },
+              {
+                kind: appPrefetchKind,
+              },
+              isAppRouter
+            )
           },
-          isAppRouter
-        )
-      },
     }
 
     // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is

diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
@@ -266,6 +266,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         gzipSize: z.boolean().optional(),
         isrFlushToDisk: z.boolean().optional(),
         largePageDataBytes: z.number().optional(),
+        linkNoTouchStart: z.boolean().optional(),
         manualClientBasePath: z.boolean().optional(),
         middlewarePrefetch: z.enum(['strict', 'flexible']).optional(),
         nextScriptWorkers: z.boolean().optional(),

diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
@@ -159,6 +159,7 @@ export interface NextJsWebpackConfig {
 }
 
 export interface ExperimentalConfig {
+  linkNoTouchStart?: boolean
   caseSensitiveRoutes?: boolean
   useDeploymentId?: boolean
   useDeploymentIdServerActions?: boolean
@@ -815,6 +816,7 @@ export const defaultConfig: NextConfig = {
   experimental: {
     serverMinification: true,
     serverSourceMaps: false,
+    linkNoTouchStart: false,
     caseSensitiveRoutes: false,
     useDeploymentId: false,
     deploymentId: undefined,