Framework Integrations
Learn how to integrate Incode Web SDK into several Frameworks
Next.js (typescript)
Integrating the Incode Web SDK with Next.js
This guide provides step-by-step instructions for integrating the Incode Web SDK with Next.js.
Considerations
- The Incode Web SDK is primarily designed for client-side rendering. While most functionality is available, it's not optimized for server-side rendering.
- Currently, the Incode Web SDK package is not compatible with server-side rendering solutions. To use it, you must import it via a script.
- For security reasons, session tokens and data fetching should be handled on the backend to protect your API keys and sensitive data.
Integration Steps
-
While working with Next.js and TypeScript, declare the
OnBoarding
element in thewindow
orGlobalThis
object to prevent any build issues while using the Incode Web SDK. As a recommendation, declare it at the top-level entry file to ensure the element is available across the app.declare global { interface Window { OnBoarding: any; } }
-
Load the CDN library script using Next.js's
next/script
module, utilizing the "beforeInteractive" strategy to ensure the SDK is available.// pages.tsx import Script from "next/script"; export default function Home() { return ( <> <Script id="incode-sdk" src="https://sdk.incode.com/sdk/onBoarding-<<WEB_SDK_VERSION>>.js" strategy="beforeInteractive" /> </> ); }
-
Now that we have the Incode Web SDK loaded, initialize it to enable the SDK to start calling the different methods.
-
To seamlessly integrate the Incode Web SDK into your application, follow the instructions outlined in the How to use Web SDK guide. By adhering to these steps, you'll gain access to the data capture tools, allowing you to seamlessly integrate them into your application based on your preferred architecture strategy.
// UserConsent.tsx
'use client';
import Script from "next/script";
import { useEffect, useRef } from "react";
function UserConsent({ session, baseUrl }: UserConsentPropTypes) {
const containerRef = useRef<HTMLDivElement>(null);
const isMounted = useRef(false);
let incode: any;
useEffect(() => {
if (!incode && window.OnBoarding) {
// Initialize the SDK
incode = window.OnBoarding.create({
apiURL: baseUrl
});
}
if (incode && isMounted.current) {
return;
}
incode.renderUserConsent(containerRef.current, {
onSuccess: () => { captureAndContinue() },
session: session,
});
isMounted.current = true;
}, [session]);
}
export { UserConsent };
Sample
A sample app using the Incode Web SDK can be found in our Typescript samples repository
Updated 5 months ago