diff --git a/npm/webpack-dev-server/src/helpers/nextHandler.ts b/npm/webpack-dev-server/src/helpers/nextHandler.ts
index bba9fa5f8ea8..aedfac36a174 100644
--- a/npm/webpack-dev-server/src/helpers/nextHandler.ts
+++ b/npm/webpack-dev-server/src/helpers/nextHandler.ts
@@ -16,6 +16,7 @@ export async function nextHandler (devServerConfig: WebpackDevServerConfig): Pro
   checkSWC(webpackConfig, devServerConfig.cypressConfig)
   watchEntryPoint(webpackConfig)
   allowGlobalStylesImports(webpackConfig)
+  changeNextCachePath(webpackConfig)
 
   return { frameworkConfig: webpackConfig, sourceWebpackModulesResult: sourceNextWebpackDeps(devServerConfig) }
 }
@@ -283,3 +284,15 @@ function allowGlobalStylesImports (webpackConfig: Configuration) {
     }
   }
 }
+
+// Our modifications of the Next webpack config can corrupt the cache used for local development.
+// We separate the cache used for CT from the normal cache (".next/cache/webpack" -> ".next/cache/cypress-webpack") so they don't interfere with each other
+function changeNextCachePath (webpackConfig: Configuration) {
+  if (webpackConfig.cache && typeof webpackConfig.cache === 'object' && ('cacheDirectory' in webpackConfig.cache) && webpackConfig.cache.cacheDirectory) {
+    const { cacheDirectory } = webpackConfig.cache
+
+    webpackConfig.cache.cacheDirectory = cacheDirectory.replace(/webpack$/, 'cypress-webpack')
+
+    debug('Changing Next cache path from %s to %s', cacheDirectory, webpackConfig.cache.cacheDirectory)
+  }
+}