NextJS Installation

Integrating the widget into a NextJS app
Our full NextJS example can be found here.
First, get everything set up as outlined in Installing the Widget.

Transpile module

Adding the widget in NextJS requires adding the transpile module package. This plugin aims to solve the following challenges:
  • code transpilation from local packages (think: a monorepo with a styleguide package)
  • code transpilation from NPM modules using ES6 imports (e.g lodash-es)
Transpile module installation:
npm i next-transpile-modules
yarn add next-transpile-modules
Following this, on the next.config.js file, add the following to import the widget as a transpiled module:
const withTM = require("next-transpile-modules")(["@0xsquid/widget"]);
const nextConfig = {
// Your nextjs config
module.exports = withTM(nextConfig);
Finally, install and configure the widget, as specified in React Installation