Next.js
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
Updated 3 months ago