# NextJS Installation

This guide will help you integrate the Squid Widget into your NextJS application. For a complete working example, check out our[ **full NextJS example**](https://github.com/0xsquid/widget-integrations/tree/main/packages/squid-v2/nextjs/next-13).

We have also built a [**NextJS 14 example**](https://github.com/0xsquid/widget-integrations/tree/main/packages/squid-v2/nextjs/next-14#client-components)**.**

### Prerequisites

Ensure you have completed the steps in the[ Installing the Widget guide ](/widget-integration/add-a-widget/widget/installing-the-widget.md)before proceeding.

### Installation Steps

#### Step 1: Install Dependencies

Install the Squid Widget and necessary dependencies:

```bash
yarn add @0xsquid/widget@^3.0.10
```

#### Step 2: Configure NextJS

The configuration differs based on your NextJS version:

**For NextJS 13.1 and newer**

Add the following to your `next.config.js`:

```javascript
const nextConfig = {
  transpilePackages: ["@0xsquid/widget", "@0xsquid/react-hooks"]
}

module.exports = nextConfig
```

**For NextJS versions older than 13.1**

1. Install the `next-transpile-modules` package:

```bash
yarn add next-transpile-modules
```

2. Update your `next.config.js`:

```javascript
const withTM = require("next-transpile-modules")(["@0xsquid/widget", "@0xsquid/react-hooks"]);

const nextConfig = {
  // Your NextJS config
};

module.exports = withTM(nextConfig);
```

#### Step 3: Integrate the Widget

Add the Squid Widget to your desired page. For example, in `src/pages/index.tsx`:

```jsx
import { SquidWidget } from "@0xsquid/widget";

export default function Home() {
  return (
    <div>
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "https://v2.api.squidrouter.com",
          // Add other configuration options here
        }}
      />
    </div>
  );
}
```

Replace `<your-integrator-id>` with the Integrator ID you received from Squid.

### Customization

To customize the widget's appearance and behavior:

1. Use the[ **Squid Widget Studio**](https://studio.squidrouter.com/) to generate a custom configuration.
2. Copy the generated config and paste it into your `config` prop.

### Running Your NextJS App

After setting up the widget, you can start your NextJS development server:

```bash
yarn dev
```

### Troubleshooting

If you encounter any issues:

1. Ensure you're using the latest version of the widget (^3.0.10).
2. Check that you've correctly configured the `next.config.js` file.
3. Verify that you've added the correct `integratorId` and `apiUrl` in the widget config.
4. Review the Migration Guide if you're upgrading from an earlier version.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/widget-integration/add-a-widget/widget/nextjs-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.