SearchX Documentation — AI-Powered E-Commerce Search

Integrate SearchX into your Next.js application with full SSR support and optimized loading.

Overview

The Next.js integration uses the next/script component for optimal script loading and a client component pattern for SDK initialization. This approach ensures the SDK loads after your page is interactive.

Step 1: Create the SDK Component

Create a new file components/search-x.tsx in your Next.js project:

"use client";

import Script from "next/script";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useEffect } from "react";

declare global {
  interface Window {
    SearchXSDK: {
      init: (config: SearchXConfig) => void;
    };
    React: typeof React;
    ReactDOM: typeof ReactDOM;
  }
}

interface SearchXConfig {
  app_id: string;
  api_key: string;
  apiPageURL: string;
  components: {
    SearchBar: { root: string };
    SearchPage: { root: string };
  };
  customCSSUrl?: string;
  settings?: {
    wishlistEnabled?: boolean;
    primaryFacetAttribute?: string;
    showIcon?: boolean;
    platform?: string;
    compactPagination?: boolean;
    searchPageURL?: string;
  };
  customLocaleUrl?: string;
  defaultLanguage?: string;
}

const SEARCHX_CONFIG: SearchXConfig = {
  app_id: "YOUR_APP_ID",
  api_key: "YOUR_API_KEY",
  apiPageURL: "https://admin.searchxengine.ai/api/v1",
  components: {
    SearchBar: { root: "searchx-bar" },
    SearchPage: { root: "searchx-page" },
  },
  customCSSUrl: "/client-theme.css",
  settings: {
    wishlistEnabled: true,
    primaryFacetAttribute: "categories",
    showIcon: true,
    platform: "custom",
    compactPagination: true,
  },
};

const useSearchX = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.React = window.React || React;
      window.ReactDOM = window.ReactDOM || ReactDOM;
    }

    const interval = setInterval(() => {
      if (window.SearchXSDK?.init) {
        window.SearchXSDK.init(SEARCHX_CONFIG);
        clearInterval(interval);
      }
    }, 100);
    return () => clearInterval(interval);
  }, []);
};

export function SearchXScript() {
  useSearchX();

  return (
    <>
      <Script
        src="https://unpkg.com/react@18/umd/react.production.min.js"
        strategy="afterInteractive"
      />
      <Script
        src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
        strategy="afterInteractive"
      />
      <Script
        src="https://helloworld-pc.github.io/searchx-components/searchx-sdk.umd.js"
        strategy="afterInteractive"
      />
    </>
  );
}

export const SearchXBar = () => (
  <div id={SEARCHX_CONFIG.components.SearchBar.root} />
);

export const SearchXPage = () => (
  <div id={SEARCHX_CONFIG.components.SearchPage.root} />
);

Step 2: Update Root Layout

Import the SearchXScript component in your root layout:

import { SearchXScript } from "@/components/search-x";
import "./globals.css";

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        {children}
        <SearchXScript />
      </body>
    </html>
  );
}

Step 3: Use in Your Pages

Import and use the SearchX components wherever you need search:

import { SearchXBar, SearchXPage } from "@/components/search-x";

export default function SearchPage() {
  return (
    <main className="min-h-screen bg-white text-black">
      <div className="container mx-auto py-10">
        <h1 className="text-3xl font-bold mb-8 text-center">
          Product Search
        </h1>

        <div className="mb-8">
          <SearchXBar />
        </div>

        <SearchXPage />
      </div>
    </main>
  );
}

React Version

The SearchX SDK currently requires React 18 UMD bundles for component rendering. The SearchXScript component handles loading these automatically alongside the SDK.

Configuration

For a full list of SDK configuration options, see the SDK Reference.