> For the complete documentation index, see [llms.txt](https://splits-organization.gitbook.io/split-sdk-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://splits-organization.gitbook.io/split-sdk-docs/split-sdk-integration-guide/sdk/examples/next.js.md).

# 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.

```bash
# 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:

```javascript
// _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:

```javascript
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:

```javascript
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:

```javascript
// 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;

```