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
Install the
next-transpile-modules
package:
yarn add next-transpile-modules
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:
Use the Squid Widget Studio to generate a custom configuration.
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:
Ensure you're using the latest version of the widget (^3.0.10).
Check that you've correctly configured the
next.config.js
file.Verify that you've added the correct
integratorId
andapiUrl
in the widget config.Review the Migration Guide if you're upgrading from an earlier version.
Last updated