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)

NextJS >=13.1

If you are using NextJS 13.1 or newer, the next-transpile-modules package comes built-in in NextJS, so you just need to add the following in your next.config.js:

const nextConfig = {
  transpilePackages: ["@0xsquid/widget"]
}

module.exports = nextConfig

NextJS <13.1

If you are using a NextJS version older than 13.1, then you need to install the next-transpile-modules package.

Transpile module installation:

npm i next-transpile-modules

or

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