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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://splits-organization.gitbook.io/split-sdk-docs/split-sdk-integration-guide/sdk/examples/next.js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.