⏭️Next.js (Browser)

Learn how to integrate Airstack APIs to your Next.js client-side (browser) application, using the Airstack Web SDK.

In this tutorial, you will learn how to start integrating Airstack API into your Next.js application.

Step 0: Pre-requisites

Completed Get API Key
Git
Node v.16+

Step 1: Install Airstack Web SDK

Use a package manager to install the Airstack Web SDK into your Next.js project:

npm install @airstack/airstack-react

yarn add @airstack/airstack-react

pnpm install @airstack/airstack-react

Step 2: Set Environment Variable

Create a new .env file:

touch .env

Add the Airstack API key as the environment variable:

NEXT_PUBLIC_AIRSTACK_API_KEY=YOUR_AIRSTACK_API_KEY

Step 3: Initialize SDK

Wrap your component with the AirstackProvider from the SDK to initialize it with the Airstack API key:

_app.tsx

import { init, AirstackProvider } from "@airstack/airstack-react";

export default function App({ Component, pageProps }) {
  return (
    <AirstackProvider apiKey={process.env.NEXT_PUBLIC_AIRSTACK_API_KEY ?? ""}>
      <Component {...pageProps} />
    </AirstackProvider>
  )
};

_app.jsx

import { init, AirstackProvider } from "@airstack/airstack-react";

export default function App({ Component, pageProps }) {
  return (
    <AirstackProvider apiKey={process.env.NEXT_PUBLIC_AIRSTACK_API_KEY ?? ""}>
      <Component {...pageProps} />
    </AirstackProvider>
  )
};

Step 4: Call Your Query

Once you have initialized the SDK, you can use the useQuery to call the Airstack API.

Below you have been provided with Airstack query to fetch the 0x address, Lens, and Farcaster owned by vitalik.eth:

For more query examples, check out Guides for various use cases you can build with Airstack.

index.tsx

import { useQuery } from "@airstack/airstack-react";

interface QueryResponse {
  data: Data | null;
  loading: boolean;
  error: Error | null;
}

interface Data {
  Wallet: Wallet;
}

interface Error {
  message: string;
}

interface Wallet {
  socials: Social[];
  addresses: string[];
}

interface Social {
  dappName: "lens" | "farcaster";
  profileName: string;
}


const query = `
query MyQuery {
  Wallet(input: {identity: "vitalik.eth", blockchain: ethereum}) {
    socials {
      dappName
      profileName
    }
    addresses
  }
}
`;

const Component = () => {
  const { data, loading, error }: QueryResponse = useQuery<Data>(query, {}, { cache: false });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  // Render your component using the data returned by the query
  console.log(data);
}

export default Component;

index.jsx

import { useQuery } from "@airstack/airstack-react";

const query = `
query MyQuery {
  Wallet(input: {identity: "vitalik.eth", blockchain: ethereum}) {
    socials {
      dappName
      profileName
    }
    addresses
  }
}
`;

const Component = () => {
  const { data, loading, error } = useQuery(query, {}, { cache: false });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  // Render your component using the data returned by the query
  console.log(data);
};

export default Component;

The data variable will return and logged into your browser's console as follows:

{
  "data": {
    "Wallet": {
      "socials": [
        {
          "dappName": "farcaster",
          "profileName": "vitalik.eth"
        },
        {
          "dappName": "lens",
          "profileName": "lens/@vitalik"
        }
      ],
      "addresses": ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"]
    }
  }
}

Developer Support

If you have any questions or need help regarding integrating Airstack into your Next.js client side application, please join our Airstack's Telegram group.

More Resources

Learn to build more with Airstack using our tutorials:

PreviousReact NextNode.js

Last updated 2 months ago

Was this helpful?

Airstack Developer Docs & FAQs