Next.js setup

The grid renders on the client and uses a Web Worker. Two small steps make it work smoothly in Next.js (App Router).

1. Render client-side

The grid touches browser APIs, so load it without SSR:

'use client';
import dynamic from 'next/dynamic';

const Grid = dynamic(() => import('./MyGrid'), { ssr: false });

2. Point at the worker

Next's bundler can't statically resolve the engine's default worker URL. Copy the worker into public/ and pass workerUrl:

// scripts/copy-worker.mjs
import { cpSync, mkdirSync } from 'node:fs';
import { createRequire } from 'node:module';
import { dirname, resolve } from 'node:path';

const require = createRequire(import.meta.url);
const coreDist = dirname(require.resolve('@kanunilabs/pivotgrid-core'));
mkdirSync('public/kanunilabs', { recursive: true });
cpSync(resolve(coreDist, 'pivot.worker.js'), 'public/kanunilabs/pivot.worker.js');

Run it before dev/build (e.g. a predev/prebuild script), then:

<BasePivotGrid
  gridId="demo"
  data={data}
  initialFields={fields}
  workerUrl="/kanunilabs/pivot.worker.js"
/>

That's it — the engine now loads its worker from your own origin. See it working in the playground.