NextJS Installation

Integrating the widget into a NextJS app

This guide will help you integrate the Squid Widget into your NextJS application. For a complete working example, check out our full NextJS example.

We have also built a NextJS 14 example.

Prerequisites

Ensure you have completed the steps in the Installing the Widget guide before proceeding.

Installation Steps

Step 1: Install Dependencies

Install the Squid Widget and necessary dependencies:

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:

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:

yarn add next-transpile-modules

1. Update your next.config.js:

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:

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

export default function Home() {
  return (
    <div>
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "https://apiplus.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 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:

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.