Next.js Dynamic Import Test
Framework: Next.js 14 (Static Export)
Pattern: Real App Pattern
SDK Loading: import() → FacetecModule.FaceTecSDK
State: useState for faceTecSDKModule & faceTecInstance
useEffects: 2 separate (load → init when loaded)
useEffect runs: 0
crossOriginIsolated: N/A
Check browser environment
Dynamic import() FaceTec SDK
Call faceTecSDKModule.setResourceDirectory()
Call faceTecSDKModule.initializeWithSessionRequest()
SDK instance ready, call start3DLiveness()
Initializing...
Real App Pattern Details:
const FacetecModule = await import('...FaceTecSDK')setFaceTecSDKModule(FacetecModule.FaceTecSDK)faceTecSDKModule?.setResourceDirectory('/resources')faceTecSDKModule?.initializeWithSessionRequest(...)- Two useEffects: load SDK → init when loaded
- Cleanup:
setFaceTecSDKModule(null)on unmount
⚠️ This EXACTLY mirrors face-match-client/components/Facetec/index.tsx