diff --git a/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts b/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts
index 43f994e35b423b7..fab8a0a8aad8d58 100644
--- a/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts
@@ -4,12 +4,16 @@
  * inside a comment.
  */
 
+import crypto from 'crypto'
+
 export function pitch(this: any) {
   if (process.env.NODE_ENV !== 'production') {
     const content = this.fs.readFileSync(this.resourcePath)
-    this.data.__checksum = (
-      typeof content === 'string' ? Buffer.from(content) : content
-    ).toString('hex')
+    this.data.__checksum = crypto
+      .createHash('sha256')
+      .update(typeof content === 'string' ? Buffer.from(content) : content)
+      .digest()
+      .toString('hex')
   }
 }
 
@@ -19,15 +23,23 @@ const NextServerCSSLoader = function (this: any, content: string) {
   // Only add the checksum during development.
   if (process.env.NODE_ENV !== 'production') {
     const isCSSModule = this.resourcePath.match(/\.module\.(css|sass|scss)$/)
+    const checksum = crypto
+      .createHash('sha256')
+      .update(
+        this.data.__checksum +
+          (typeof content === 'string' ? Buffer.from(content) : content)
+      )
+      .digest()
+      .toString('hex')
+      .substring(0, 12)
+
     if (isCSSModule) {
       return (
-        content +
-        '\nmodule.exports.__checksum = ' +
-        JSON.stringify(this.data.__checksum)
+        content + '\nmodule.exports.__checksum = ' + JSON.stringify(checksum)
       )
     }
 
-    return `export default ${JSON.stringify(this.data.__checksum)}`
+    return `export default ${JSON.stringify(checksum)}`
   }
 
   return content