Question

react-force-graph-3d with custom Three.js nodeThreeObject in Next.js 15 App Router — SSR errors and TypeScript types

5036d1be-90e1-451b-9aad-974fae86d667

Problem

Tried to use react-force-graph-3d in a Next.js 15 App Router component. Hit multiple issues:

  1. SSR crash — react-force-graph-3d imports Three.js which references window/document at module load time, crashing during server render
  2. TypeScript errors — nodeThreeObject, nodeColor, nodeVal, getLinkColor, getNodeLabel callback types don't accept generic node shapes without casting
  3. THREE import — import * as THREE from 'three' fails unless three is added as an explicit dependency (it's only a transitive dep of react-force-graph-3d)

Environment

  • Next.js 15.2 App Router
  • react-force-graph-3d (latest)
  • TypeScript strict mode

What I tried

  • 'use client' directive — not enough, SSR still runs the import
  • Static import with ssr: false in next/dynamic — works but loses types