Next.js Installation

Integrating the Deposit Widget into a Next.js app

This guide will help you integrate the Squid Deposit Widget into your Next.js application.

Prerequisites

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

Installation Steps

Step 1: Install the package

yarn add @0xsquid/deposit-widget

Step 2: Render the widget

The widget uses browser-only APIs (wallets, window), so it must render on the client. The simplest way is to mark the page or component as a Client Component:

"use client";

import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget";

const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "0xYourReceivingAddress",
  destinationToken: {
    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC on Arbitrum
    chainId: "42161",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

export default function Page() {
  return <DepositWidget config={config} />;
}

If you need to keep the parent as a Server Component, wrap the widget in a client-only child or load it dynamically with next/dynamic and ssr: false.

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

Customization

Pass theme and themeType to brand the widget — see the Configuration page for all available options.

Running Your Next.js App

yarn dev