Fix Plan

To resolve the Subresource Integrity (SRI) issue with Next.js and Vercel, we need to ensure that the integrity hashes match the served content, taking into account CDN transformations.

Step-by-Step Solution

• Disable experimental.sri: Temporarily disable SRI in next.config.mjs to verify that the issue is indeed related to SRI.
• Use a custom getStaticProps: Implement a custom getStaticProps function to generate the integrity hash after CDN transformations.
• Generate hash after compression: Use a library like zlib to compress the content and generate the hash.

Example code:

// next.config.mjs
module.exports = {
  experimental: {
    // Disable SRI temporarily
    // sri: { algorithm: 'sha256' }
  }
}

// pages/_app.js
import { useState, useEffect } from 'react';
import zlib from 'zlib';

function MyApp({ Component, pageProps }) {
  const [integrityHash, setIntegrityHash] = useState('');

  useEffect(() => {
    const chunk = '_next/static/chunks/turbopack-0w~tdqgwj6w-f.js';
    fetch(chunk)
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => {
        const compressedBuffer = zlib.gzipSync(arrayBuffer);
        const hash = crypto.createHash('sha256');
        hash.update(compressedBuffer);
        setIntegrityHash(hash.digest('base64'));
      });
  }, []);

  return (
    <div>
      <script
        src="_next/static/chunks/turbopack-0w~tdqgwj6w-f.js"
        integrity={`sha256-${integrityHash}`}
        crossOrigin="anonymous"
      />
      <Component {...pageProps} />
    </div>
  );
}

Verification

Verify that the integrity hash is generated correctly and matches the served content by checking the browser console for any SRI-related errors.

Extra Tips

• Ensure that the zlib library is installed and imported correctly.
• Consider using a more robust solution, such as using a library like subresource-integrity to generate the integrity hash.
• Keep in mind that this is a temporary workaround, and a more permanent solution may be required to address the underlying issue.