Failed to regiester service worker error in Next.js file

I'm using workbox-webpack-plugin to generate a service worker for me and I'm using copy-webpack-plugin move generated service worker files to the same directory as main.js. My next js config file goes like this:-

module.exports = {

 webpack: (config, {isServer, buildId, dev, ...rest}) => {

  if (dev) {

     const devSwSrc = join(__dirname, "register-sw.js");
     config.plugins.push(new CopyWebpackPlugin([devSwSrc]));
     config.plugins.push(new GenerateSW({ ...defaultGenerateOpts }));

     // Register SW
     const originalEntry = config.entry;
     config.entry = async () => {

     const entries = await originalEntry();
     const swCompiledPath = join(__dirname, 'register-sw-compiled.js');

     if (entries['main.js'] && !entries['main.js'].includes(swCompiledPath)) {

       let content = await readFile(require.resolve('./register-sw.js'), 'utf8');

       await writeFile(swCompiledPath, content, 'utf8');

       entries['main.js'].unshift(swCompiledPath);

      }

    return entries;
 
};

}

I'm trying to copying my service worker to the same dir as main.js which is chunk/static so that when it's fetched it should not return any error. But instead, I'm getting this error.

TypeError: Failed to register a ServiceWorker for scope ('[http://localhost:3000/](http://localhost:3000/)') with the script ('[http://localhost:3000/service-worker.js](http://localhost:3000/service-worker.js)'): A bad HTTP response code (404) was received when fetching the script.

I know this error is because it's not getting served from the same dir as main.js and I need to make some changes in copy-webpack-plugin in order to achieve that. Also I'm trying to avoid custom server.js file to server routes like /service-worker

Any help would be really appreciated. Thanks in advance