# NextJS Installation

Our full NextJS example can be found [here](https://github.com/0xsquid/widget-integrations/tree/main/packages/next-app). 

First, get everything set up as outlined in [installing-the-widget](https://docs.squidrouter.com/old-v2-documentation-deprecated/add-a-widget/widget/installing-the-widget "mention").

### 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`:

```javascript
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:

```bash
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:&#x20;

```javascript
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](https://docs.squidrouter.com/old-v2-documentation-deprecated/add-a-widget/widget/react-installation "mention")