diff --git a/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts
index 5b07f3ae470b..7b0ed10f259c 100644
--- a/packages/next/build/webpack/config/blocks/css/plugins.ts
+++ b/packages/next/build/webpack/config/blocks/css/plugins.ts
@@ -42,6 +42,23 @@ function isIgnoredPlugin(pluginPath: string): boolean {
   return true
 }
 
+const createLazyPostCssPlugin = (
+  fn: () => import('postcss').AcceptedPlugin
+): import('postcss').AcceptedPlugin => {
+  let result: any = undefined
+  const plugin = (...args: any[]) => {
+    if (result === undefined) result = fn() as any
+    if (result.postcss === true) {
+      return result(...args)
+    } else if (result.postcss) {
+      return result.postcss
+    }
+    return result
+  }
+  plugin.postcss = true
+  return plugin
+}
+
 async function loadPlugin(
   dir: string,
   pluginName: string,
@@ -60,13 +77,13 @@ async function loadPlugin(
   if (isIgnoredPlugin(pluginPath)) {
     return false
   } else if (options === true) {
-    return require(pluginPath)
+    return createLazyPostCssPlugin(() => require(pluginPath))
   } else {
     const keys = Object.keys(options)
     if (keys.length === 0) {
-      return require(pluginPath)
+      return createLazyPostCssPlugin(() => require(pluginPath))
     }
-    return require(pluginPath)(options)
+    return createLazyPostCssPlugin(() => require(pluginPath)(options))
   }
 }