Next.js + Web Workers

Use Web Workers in your Next.js project using import.

Installation

npm install --save @blabu.com/next-workers worker-loader

or

yarn add @blabu.com/next-workers worker-loader

Usage

Create a next.config.js in your project

// next.config.js
const withWorkers = require('@blabu.com/next-workers')
module.exports = withWorkers({
  /* config options here */
})

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withWorkers = require('@blabu.com/next-workers')
module.exports = withWorkers({
  webpack(config, options) {
    return config
  }
})

You can also pass overriding options to worker-loader using workerLoaderOptions

// next.config.js
const withWorkers = require('@blabu.com/next-workers')
module.exports = withWorkers({
  workerLoaderOptions: { inline: true },
})

Web Worker files are identified by the .worker.js or .worker.ts extension

Because Workers are transpiled with worker-loader you can import dependencies just like other project files. See the worker-loader documentation for examples

// example.worker.js
self.addEventListener('message', (event) => console.log('Worker received:', event.data))
self.postMessage('from Worker')

The Worker can then be imported like a normal module and instantiated

// pages/example.js
import React from 'react';

import ExampleWorker from '../example.worker';

export default class extends React.Component {
  state = { latestMessage: null }
  componentDidMount() {
    // Instantiate the Worker
    this.worker = new ExampleWorker()
    this.worker.postMessage('from Host')
    this.worker.addEventListener('message', this.onWorkerMessage)
  }
  componentWillUnmount() {
    // Close the Worker thread
    this.worker.terminate()
  }
  onWorkerMessage = (event) => this.setState({ latestMessage: event.data })
  render() {
    return <h1>Message from Worker: {this.state.latestMessage}</h1>
  }
}