Next.js

CanvasGlobe modules are safe to import during server rendering, but the canvas must be constructed in the browser. In the App Router, use a Client Component:

npm install react-canvas-globe canvas-globe react

"use client";

import { Globe } from "react-canvas-globe";

export default function CustomerGlobe({ markers }) {
  return <Globe markers={markers} preset="hologram" tooltip />;
}

To exclude it from the server bundle:

import dynamic from "next/dynamic";

const Globe = dynamic(
  () => import("react-canvas-globe").then((module) => module.Globe),
  { ssr: false, loading: () => <div style={{ aspectRatio: 1 }} /> },
);

Reserve an aspect ratio in the fallback to avoid layout shift. Pass the purchased license key through the component's licenseKey prop. See the license-key guide.