Start using Sledge and Next.js

Prior using all Sledge's widgets, follow the steps below to start integrating Sledge into your Next.js storefront.

Quickstart

Install Sledge Core

First, you need to install the core of sledge package, run the following command:

pnpm i @sledge-app/core

Setup the SledgeProvider

Once you've installed the core, create a new directory for your components (if it doesn't already exist).

For example, you can create a directory named components and create a new directory in the component folder named sledge and finally create a file named sledge-provider-component.tsx.

      • sledge-provider-component.tsx
  • components/sledge/sledge-provider-component.tsx
    "use client";
     
    import { SledgeProvider } from "@sledge-app/core";
    import "@sledge-app/core/style.css";
    import { ReactNode } from "react";
     
    interface ISledgeProvider {
      children: React.ReactNode;
      apiKey: string;
      instantSearchApiKey: string;
      userId: string;
      userEmail: string;
      userFullname: string;
    }
     
    export default function SledgeProviderComponent({
      children,
      apiKey,
      instantSearchApiKey,
      userId,
      userEmail,
      userFullname,
    }: ISledgeProvider) {
      return (
        <SledgeProvider
          apiKey={apiKey}
          instantSearchApiKey={instantSearchApiKey}
          userId={userId}
          userEmail={userEmail}
          userFullname={userFullname}
        >
          {children}
        </SledgeProvider>
      );
    }

    In app/layout.tsx, import your sledge-provider-component.tsx component and use it to render SledgeProviderComponent

    app/layout.tsx
    "use client";
     
    import SledgeProviderComponent from "components/sledge/sledge-provider-component";
     
    export default async function RootLayout() {
      return (
        <html>
          <body>
            <SledgeProviderComponent
              apiKey=""
              instantSearchApiKey=""
              userId=""
              userEmail=""
              userFullname=""
            >
              {/* Main content */}
            </SledgeProviderComponent>
          </body>
        </html>
      );
    }

    Let's look on list of all available parameters:


    ParameterTypeDescription
    apiKeystring (required)

    To get the `apiKey`, go to :
    Shopify Admin › Apps › Sledge › General › API Key › API Key.

    See Backend for more information.

    instantSearchApiKeystring (required)

    To get the `instantSearchApiKey`, go to :
    Shopify Admin › Apps › Sledge › General › API Key ›
    Instant Search Key.

    See Backend for more information.

    userIdstring

    Fill with your own user logined data,
    You can check out the example code

    userEmailstring

    Fill with your own user logined data,
    You can check out the example code

    userFullnamestring

    Fill with your own user logined data,
    You can check out the example code

    Install one of the Sledge's widget

    We're going to try implement product filters widget so install @sledge-app/react-instant-search package first :

    pnpm i @sledge-app/react-instant-search

    Implement Widget

    Create a file named sledge-product-filter-widget.tsx in the components/sledge folder.

      • sledge-product-filter-widget.tsx
  • components/sledge/sledge-product-filter-widget.tsx
    "use client";
     
    import { ProductFilterWidget } from "@sledge-app/react-instant-search";
     
    const SledgeProductFilterWidget = (product) => (
      <ProductFilterWidget
        query={{
          keyword: "q",
        }}
        params={{
          collectionId: "",
          collectionName: "",
        }}
      />
    );

    ProductFilterWidget Parameters

    Let's look on list of all available parameters:


    ParameterTypeDescription
    keywordstring

    Fill up your unique queryParam name for keyword.
    e.g: https://your-online-store.com/collection/all?q=hoodie

    Default: q

    collectionIdstring (required)

    Fill with your own collection id,
    You can check out the example code

    collectionNamestring (required)

    Fill with your own collection name,
    You can check out the example code

    Create collections route

    Create a new route for your collections page.

        • page.tsx
  • In collections/[handle]/page.tsx, import your sledge-product-filter-widget.tsx component and use it to render ProductFilterWidget

    collections/[handle]/page.tsx
    import SledgeProductFilterWidget from "components/sledge/sledge-product-filter-widget.tsx";
    import { getCollection } from "lib/shopify";
     
    export default async function Page({ params }: any) {
      const collection: any = await getCollection(params.handle);
     
      return (
        <>
          <SledgeProductFilterWidget collection={collection} />
        </>
      );
    }

    Widget completely running

    Sledge's product filters widget is now ready to be used.

    sledge-image-docs

    Learn more

    Congratulations! Now that the installation is complete, you can use all Sledge's widgets and start integrating to your Next.js storefront.