Next.js Spin Wheel Component

1. 1. Install the React SDK

   npm install @questlabs/react-sdk

2. 2. Create a Client Component for the wheel

   Mark the file with "use client" and load the SDK with next/dynamic and ssr: false, so the wheel renders in the browser only.

   app/components/SpinWheel.jsx

   "use client";
   
   import dynamic from "next/dynamic";
   import "@questlabs/react-sdk/dist/style.css";
   
   const QuestProvider = dynamic(
     () => import("@questlabs/react-sdk").then((mod) => mod.QuestProvider),
     { ssr: false }
   );
   const SpinTheWheel = dynamic(
     () => import("@questlabs/react-sdk").then((mod) => mod.SpinTheWheel),
     { ssr: false }
   );
   
   export default function SpinWheel() {
     return (
       <QuestProvider apiKey="your-api-key" entityId="your-entity-id" apiType="PRODUCTION">
         <SpinTheWheel
           userId="your-user-id"
           token="your-user-token"
           campaignId="your-campaign-id"
         />
       </QuestProvider>
     );
   }

3. 3. Render it from any page

   The page itself stays a Server Component; only SpinWheel runs on the client.

   app/rewards/page.jsx

   import SpinWheel from "../components/SpinWheel";
   
   export default function RewardsPage() {
     return <SpinWheel />;
   }

Sources: @questlabs/react-sdk on npm · Next.js docs: Server and Client Components · Next.js docs: Lazy loading (ssr: false, named exports)