try worker-loader in next config

examples/with-nextjs/next.config.js

@@ -1,12 +1,25 @@
-/** @type {import('next').NextConfig} */
+// next.config.js
-const nextConfig = {
+module.exports = {
-  distDir: "build",
+  webpack(config, { isServer }) {
-  typescript: {
+    config.distDir = "build";
-    // The ts config doesn't work with `jsx: preserve" and if updated to `react-jsx` it gets ovewritten by next js throwing ts errors hence I am ignoring build errors until this is fixed.
+    config.typescript = {
       ignoreBuildErrors: true,
-  },
-  // This is needed as in pages router the code for importing types throws error as its outside next js app
-  transpilePackages: ["../"],
     };
+    config.transpileModules = ["../"];
 
-module.exports = nextConfig;
+    if (!isServer) {
+      config.module.rules.push({
+        test: /\.worker\.(js|ts)$/,
+        use: {
+          loader: "worker-loader",
+          options: {
+            // You can tweak the filename pattern here
+            filename: "static/chunks/[hash].worker.js",
+          },
+        },
+      });
+    }
+
+    return config;
+  },
+};