NextJS

For NextJS, you need to use the use client directive to make the component client side. Also, you need to use the dynamic import to make import components only on the client side.

Example


'use client';
import dynamic from 'next/dynamic';
 
const GraphCanvas = dynamic(
  () => import('reagraph').then((mod) => mod.GraphCanvas),
  { ssr: false }
);
 
export const SimpleGraph = () => {
  return (
    <div className='h-[300px] w-full relative'>
      <GraphCanvas
        labelType='all'
        nodes={[
          {
            id: 'n-1',
            label: '1',
          },
          {
            id: 'n-2',
            label: '2',
          },
        ]}
        edges={[
          {
            id: '1->2',
            source: 'n-1',
            target: 'n-2',
            label: 'Edge 1-2',
          },
        ]}
      />
    </div>
  );
};