Next.js

The basic usage of LightningChart JS in Next.js is very similar compared to React:

Chart component:

"use client";
import React, { useEffect, useRef } from "react";
import { lightningChart } from "@arction/lcjs";

const Chart = (props) => {
  const { id, data } = props;
  const containerRef = useRef(null);
  const chartRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) {
      return;
    }

    const chart = lightningChart().ChartXY({ container });

    const lineSeries = chart.addLineSeries({
      dataPattern: { pattern: "ProgressiveX" },
    });
    chartRef.current = { chart, lineSeries };

    return () => {
      chart.dispose();
      chartRef.current = null;
    };
  }, []);

  useEffect(() => {
    const { lineSeries } = chartRef.current;
    lineSeries.add(data);
  }, [data]);

  return (
    <div
      id={id}
      ref={containerRef}
      style={{ width: "100%", height: "100%" }}
    ></div>
  );
};

export default Chart;

Main page:

"use client";
import Chart from "./chart";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between">
      <div style={{ width: "100vw", height: "100vh" }}>
        <Chart id="chart" data={[
                {x: 1, y: 1},
                {x: 2, y: 3},
                {x: 3, y: 2},
                {x: 4, y: 4},
            ]} />
      </div>
    </main>
  );
}

For a full example with real-time data visualization, see LightningChart JS x Next.js template project in GitHub.