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​
React Installation
Iframe Installation
Last modified 4mo ago