Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
index.js Feature/typescript worker (#431) Sep 14, 2019
package.json Publish Nov 14, 2018
readme.md Feature/typescript worker (#431) Sep 14, 2019

readme.md

Next.js + Web Workers

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

Installation

npm install --save @zeit/next-workers worker-loader

or

yarn add @zeit/next-workers worker-loader

Usage

Create a next.config.js in your project

// next.config.js
const withWorkers = require('@zeit/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('@zeit/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('@zeit/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>
  }
}
You can’t perform that action at this time.