Next.js

This guide outlines how to integrate the Split SDK into Next.js applications, including setup instructions, SDK initialization, and employing React Context to ensure SDK functionality is accessible throughout your components.

Add SDK

Prerequisite

Before installing the SDK, confirm that your environment meets the minimum requirements:

• Node.js version 18.0.0 or higher

Setup

Install the SDK using npm or yarn.

# node
npm install @split-tech/browser-sdk

# yarn
yarn add @split-tech/browser-sdk

---

Example Code

In your Next.js _app.js file, import and initialize the Split SDK. Ensure the API key is loaded from environment variables for security:

// _app.tsx
import * as split from "@split-tech/browser-sdk-test";

const Split = {
 // Call bootstrap at the application's entry point
  bootstrap: async () => {
    const apiKey = process.env.NEXT_PUBLIC_SPLIT_API_KEY ?? "";
    await split.init(apiKey);
  },
};

/* Initialize Split SDK */
Split.bootstrap();

const App = ({ Component, pageProps: { sessions, ...pageProps } }: AppProps) => 
  return (  
    <SplitProvider>
      <Component {...pageProps} />
    </SplitProvider>
      
};

export default App;

Split Provider

Use React Context to provide the Split functionality throughout your application:

type SplitContextType = typeof Split;

const SplitContext = createContext<SplitContextType>(Split);

export const SplitContextProvider = ({
  context = Split,
  children,
}: {
  context?: SplitContextType;
  children?: React.ReactNode;
}) => {
  const providerValue = useMemo(() => {
    return {
      ...context,
    };
  }, [context]);

  return <SplitContext.Provider value={providerValue}>{children}</SplitContext.Provider>;
};

export const useSplit = () => useContext(SplitContext);

Within your Next.js components, access the Split SDK's capabilities via the custom hook:

const { useSplit } = useContext(SplitContext);

const Component = () => {
  const split = useSplit();

  // Use split SDK methods as needed
};

Integration with On-chain Rewards

Once the initialization process is complete, your application will be prepared to request on-chain rewards. The addReferral function plays a crucial role in this setup. By accepting a user's wallet address as an argument, it sends the referrer's wallet address and the referee's wallet address to Split. Based on this, Split will verify that the referrer logged into your app based on the referral link has performed the campaign you specified. Therefore, this function should be triggered when a referee connects their wallet in your app.

Let's illustrate this with a practical UI example within a React application. The SDKTestPage component integrates the Split SDK's addReferral method, allowing users to connect their wallets and facilitate referral tracking:

// pages/SDKTestPage.tsx

import { useState } from "react";
import { useSplit } from "../context/SplitProvider";
import { useAccount } from "wagmi";
import { SiweMessage } from "siwe";

export const SDKTestPage = () => {
  const { address } = useAccount();
  const { addReferral } = useSplit();

  const handleClick = async () => {
    await addReferral(walletAddress);
  };

  return (
      <div>
        <p>Split SDK Test Page</p>
        <div>
          <input type="text" value={address} />
          <button type="button" onClick={handleClick}>Connect Wallet</button>
        </div>
      </div>
  );
};

export default SDKTestPage;