diff --git a/packages/next/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js b/packages/next/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js
new file mode 100644
index 0000000000000..a8f85c0b8703b
--- /dev/null
+++ b/packages/next/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js
@@ -0,0 +1 @@
+(()=>{"use strict";var e={213:(e,r,t)=>{var n=t(901);var i=Object.create(null);var a=typeof document==="undefined";var o=Array.prototype.forEach;function debounce(e,r){var t=0;return function(){var n=this;var i=arguments;var a=function functionCall(){return e.apply(n,i)};clearTimeout(t);t=setTimeout(a,r)}}function noop(){}function getCurrentScriptUrl(e){var r=i[e];if(!r){if(document.currentScript){r=document.currentScript.src}else{var t=document.getElementsByTagName("script");var a=t[t.length-1];if(a){r=a.src}}i[e]=r}return function(e){if(!r){return null}var t=r.split(/([^\\/]+)\.js$/);var i=t&&t[1];if(!i){return[r.replace(".js",".css")]}if(!e){return[r.replace(".js",".css")]}return e.split(",").map((function(e){var t=new RegExp("".concat(i,"\\.js$"),"g");return n(r.replace(t,"".concat(e.replace(/{fileName}/g,i),".css")))}))}}function updateCss(e,r){if(!r){if(!e.href){return}r=e.href.split("?")[0]}if(!isUrlRequest(r)){return}if(e.isLoaded===false){return}if(!r||!(r.indexOf(".css")>-1)){return}e.visited=true;var t=e.cloneNode();t.isLoaded=false;t.addEventListener("load",(function(){if(t.isLoaded){return}t.isLoaded=true;e.parentNode.removeChild(e)}));t.addEventListener("error",(function(){if(t.isLoaded){return}t.isLoaded=true;e.parentNode.removeChild(e)}));t.href="".concat(r,"?").concat(Date.now());if(e.nextSibling){e.parentNode.insertBefore(t,e.nextSibling)}else{e.parentNode.appendChild(t)}}function getReloadUrl(e,r){var t;e=n(e,{stripWWW:false});r.some((function(n){if(e.indexOf(r)>-1){t=n}}));return t}function reloadStyle(e){if(!e){return false}var r=document.querySelectorAll("link");var t=false;o.call(r,(function(r){if(!r.href){return}var n=getReloadUrl(r.href,e);if(!isUrlRequest(n)){return}if(r.visited===true){return}if(n){updateCss(r,n);t=true}}));return t}function reloadAll(){var e=document.querySelectorAll("link");o.call(e,(function(e){if(e.visited===true){return}updateCss(e)}))}function isUrlRequest(e){if(!/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(e)){return false}return true}e.exports=function(e,r){if(a){console.log("no window.document found, will not HMR CSS");return noop}var t=getCurrentScriptUrl(e);function update(){var e=t(r.filename);var n=reloadStyle(e);if(r.locals){console.log("[HMR] Detected local css modules. Reload all css");reloadAll();return}if(n){console.log("[HMR] css reload %s",e.join(" "))}else{console.log("[HMR] Reload all css");reloadAll()}}return debounce(update,50)}},901:e=>{function normalizeUrl(e){return e.reduce((function(e,r){switch(r){case"..":e.pop();break;case".":break;default:e.push(r)}return e}),[]).join("/")}e.exports=function(e){e=e.trim();if(/^data:/i.test(e)){return e}var r=e.indexOf("//")!==-1?e.split("//")[0]+"//":"";var t=e.replace(new RegExp(r,"i"),"").split("/");var n=t[0].toLowerCase().replace(/\.$/,"");t[0]="";var i=normalizeUrl(t);return r+n+i}}};var r={};function __nccwpck_require__(t){var n=r[t];if(n!==undefined){return n.exports}var i=r[t]={exports:{}};var a=true;try{e[t](i,i.exports,__nccwpck_require__);a=false}finally{if(a)delete r[t]}return i.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var t=__nccwpck_require__(213);module.exports=t})();
\ No newline at end of file
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 58b343b2617bd..75f511c0fe37a 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -1468,6 +1468,7 @@ export async function ncc_minimatch(task, opts) {
 // eslint-disable-next-line camelcase
 externals['mini-css-extract-plugin'] =
   'next/dist/compiled/mini-css-extract-plugin'
+
 export async function ncc_mini_css_extract_plugin(task, opts) {
   await task
     .source(
@@ -1485,6 +1486,24 @@ export async function ncc_mini_css_extract_plugin(task, opts) {
       },
     })
     .target('compiled/mini-css-extract-plugin')
+  await task
+    .source(
+      relative(
+        __dirname,
+        resolve(
+          require.resolve('mini-css-extract-plugin'),
+          '../hmr/hotModuleReplacement.js'
+        )
+      )
+    )
+    .ncc({
+      externals: {
+        ...externals,
+        './hmr': './hmr',
+        'schema-utils': 'next/dist/compiled/schema-utils3',
+      },
+    })
+    .target('compiled/mini-css-extract-plugin/hmr')
   await task
     .source(
       opts.src ||