Set up the Next.js app

Next.js is a powerful framework for building React applications with server-side rendering, routing, and more. In this guide, we'll walk you through setting up a Next.js app to create a custom web using the Airsoko API.

Prerequisites

Before you begin, make sure you have Node.js and npm installed on your machine.

Step 1: Create a New Next.js App

First, let's create a new Next.js app using the following command:

npx create-next-app my-airsoko-app

Replace my-next-app with your preferred app name.

Step 2: Install other required dependencies

Navigate into your newly created Next.js app directory and install necessary dependencies:

npm install @airsoko/api @airsoko/react @airsoko/graphql @airsoko/next

Step 3: Set up Airsoko API Integration

Now, let's integrate the Airsoko API into our Next.js app. Follow these steps:

1. Go to the Airsoko website and sign up for an account if you haven't already or visit Seller panel (opens in a new tab).

2. Once signed in, navigate to the settings > apps API section and generate your API key.

3. Store your API key securely in a .env.local file at the root of your Next.js app:

AIRSOKO_STOREFRONT_TOKEN =YOUR_API_TOKEN_HERE

AIRSOKO_STOREFRONT_DOMAIN =my-store-domain.airsoko.com

Step 5: Add airsoko context to your app

Inside you next app, navigate to pages folder,inside the \_app.tsx file modify with this code or according to your apps' setup

import { useApollo, AirsokoGraphqlProvider } from "@airsoko/graphql/apollo";
import { AppProps } from "next/app";
 
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  const apolloClient = useApollo(pageProps);
 
  return (
    <AirsokoGraphqlProvider client={apolloClient}>
      <Component {...pageProps} />
    </AirsokoGraphqlProvider>
  );
};
 
export default MyApp;

Step 6: Fetch Data from Airsoko API

In your Next.js app under pages directory, create a new file api/graphql and add the following code to fetch data from the Airsoko API: insert and save this snippet

import { GraphqlApiHandler } from "@airsoko/next";
 
export default GraphqlApiHandler;

Fetch store products

To retrieve products, create a file named products.tsx and insert the following code:

import { useGetProductsBaseQuery } from "@airsoko/graphql";
 
function ProductListPage() {
  const { data, loading } = useGetProductsBaseQuery();
  console.log(data.products);
  return <div>{/** products list here*/}</div>;
}
 
export default ProductListPage;

this will fetch the products you created on the client side

for server side which is good for SEO you can use

import {
  GetProductsBaseDocument,
  GetProductsBaseQuery,
  GetProductsBaseQueryVariables,
} from "@airsoko/graphql";
import client from "@airsoko/graphql/client";
import { NextApiRequest, NextApiResponse } from "next";
 
export const getServerSideProps = async ({
  res,
  query,
}: {
  req: NextApiRequest;
  res: NextApiResponse;
  query: NextApiRequest["query"];
}) => {
  const products: { data: GetProductsBaseQuery } = await client.graphQLClient.query({
    query: GetProductsBaseDocument,
    variables: { page: Number(query.page) } as GetProductsBaseQueryVariables,
    fetchPolicy: "no-cache",
  });
  console.log(products.data.products);
};

Fetch Single product fetching

To retrieve a single, such as utilizing Server Side Rendering (SSR), establish a folder named product. Within this folder, create a file named [handle].tsx and insert the following code:

import { ProductQuery, Product } from "@airsoko/graphql";
import client from "@airsoko/graphql/client";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
const ProductDisplayPage = ({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return (
    <div className="x-bg-white">
      <h1>{data.product}</h1>
    </div>
  );
};
export default ProductDisplayPage;
 
export const getServerSideProps: GetServerSideProps<{ data: ProductQuery }> = async ({ query }) => {
  const { handle } = query;
  const { data, error } = await client.product.get(
    { handle: handle as string },
    {
      fetchPolicy: "network-only",
    }
  );
 
  return {
    props: {
      data: data,
    },
  };
};

This function fetches products from the Airsoko API using your API key.

Step 7: Display Data in Your Next.js App

Now, you can use the data fetched from the Airsoko API to display products in your Next.js app. Create a new page or component and use the fetchProducts function to fetch data and render it as needed.

You can now start your new airsoko and integrated nextjs app by running the following command:

npm run dev

Conclusion

Congratulations! You've successfully set up a Next.js app to create a custom web using the Airsoko API. You can now build upon this foundation to create powerful e-commerce applications with Next.js and Airsoko.

To add more functionalities to your app such ass **cart actions ** visit Airsoko react shopping docs and for authentication visit Airsoko auth docs