Overview

In order to use the React SDK in a Next.js application on the client-side, you'll need to dynamically load the components by using the Dynamic Import feature, as the components were meant to be running in the browser and currently do not support server-side rendering (SSR).

Prerequisites

Installing Stigg's React SDK

You have a few options for using the @stigg/react-sdk package in your project:

From npm:

npm install @stigg/react-sdk

From yarn:

yarn add @stigg/react-sdk

Retrieving the client API key

In the Stigg Cloud Console, go to Settings > Account > Environments.

Copy the Client API key of the relevant environment.

Getting started

Create a wrapper component

First, you'll need to create a wrapper component that wraps the StiggProvider :

// ./components/PricingPlans.tsx

export const PricingPlans = () => {
  return (
    <StiggProvider apiKey={"YOUR-CLIENT-API-KEY"}>
      <Paywall />
    </StiggProvider>
  )
}

Import the wrapper component

Use the dynamic function to import the wrapper component, make sure to set ssr: false when doing so. Then you can render the wrapper component in your app.

// ./pages/index.tsx

import dynamic from 'next/dynamic'

export const PricingPlans = dynamic(() => import('./PricingPlans').then((mod) => mod.PricingPlans), {ssr: false});

const Home: NextPage = () => { 
    return (
      <div>
          <PricingPlans />
      </div>
    );
}

Example project

nextjs-react-sdk-example

GitHub